У меня есть липкое меню на моем сайте wordpress, которое представляет собой просто заголовок с фиксированной позицией css, но он накладывается поверх каждого из моих разделов. Вы поймете, что я имею в виду, если посетите здесь тестовый сайт.

Если вы щелкните значок меню и щелкните раздел, он перейдет к каждому разделу, но мне нужно, чтобы закрепленное меню располагалось над каждым разделом, а не накладывалось сверху.

В моем header.php у меня есть

<div id="header-wrap">

                    <div class="poweredby">POWERED BY bluesource<p class="mobile-phone"><a href="tel: +44 0845 319 2100">0845 319 2100</a></p></div>

                        <div class="headerphone">0845 319 2100</div>

                    <button class="toggle-menu menu-right push-body"><i class="fa fa-bars"></i></button>

                        <!-- Right menu element-->

                        <?php if ( has_nav_menu( 'primary' ) || has_nav_menu( 'social' ) ) : ?>

                            <?php if ( has_nav_menu( 'primary' ) ) : ?>

                                <nav id="site-navigation" class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-right" role="navigation" aria-label="<?php esc_attr_e( 'Primary Menu', 'twentysixteen' ); ?>">
                                    <?php
                                        wp_nav_menu( array(
                                        'theme_location' => 'primary',
                                        'menu_class'     => 'primary-menu',
                                        ) );
                                    ?>
                                </nav> 

                            <?php endif; ?>

                        <?php endif; ?>

                </div><!-- end header wrap -->

В моей таблице стилей есть

.site-header {
background: #333 none repeat scroll 0 0;
height: 98px;
padding: 27px 0;
text-align: right;
}

.site-header-main {
    text-align: right;
    right: 0;
    display: block;
    padding-right: 27px;
}

#header-wrap {
    background: #333;
    position: fixed;
    top: 0;
    z-index: 100;
    height: 98px;
    padding-top: 27px;
    padding-right: 27px;
    opacity: 0.9;
}
0
Duggy G 19 Фев 2016 в 20:48

2 ответа

Лучший ответ

Этот код сделает это

$('#header-wrap ul li a').click(function(){
    href=$(this).attr('href');
    $('html, body').animate({
      scrollTop: $(href).offset().top-98  // since the height of your nav is 98px
    }, 500);
});

Для внешних ссылок

$(document).ready(function(){
   var urlHash = window.location.href.split("#")[1];
    $('html,body').animate({
        scrollTop: $('#' + urlHash).offset().top-98 
    }, 500);
});
0
The Process 19 Фев 2016 в 20:15

Это должно сработать. Я увеличил позицию вправо, чтобы вы получили белую полосу по бокам, я применил важный тег, иначе он будет перезаписан.

nav#site-navigation {
    top: 98px;
}
.cbp-spmenu-right.menu-open {
    right: 23px !important;
}
0
Jamie Harding 19 Фев 2016 в 19:28