Html 粘性菜单问题

Html 粘性菜单问题,html,css,Html,Css,我的wordpress网站上有一个粘性菜单,它只是一个固定css位置的标题,但它覆盖在我的每个部分的顶部。如果您查看测试站点,您可以了解我的意思 如果你点击菜单图标并点击一个部分,它将导航到每个部分,但我需要将粘性菜单放置在每个部分的上方,而不是覆盖在顶部 在我的header.php中 <div id="header-wrap"> <div class="poweredby">POWERED BY bluesource<p

我的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 -->
这个代码就可以了

$('#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);
});

这应该可以完成任务。我正确地增加了位置,这样你就可以沿着侧面看到白色的条,我应用了一个重要的标记,否则它会被覆盖

nav#site-navigation {
    top: 98px;
}
.cbp-spmenu-right.menu-open {
    right: 23px !important;
}

请在此处添加有意义的代码和问题描述。不要只是链接到需要修复的站点——否则,一旦问题解决或者你链接到的站点无法访问,这个问题将对未来的访问者失去任何价值。发布一个能证明你的问题的帖子会帮助你得到更好的答案。有关更多信息,请参阅“谢谢!”!这在我的主页上使用我的导航链接效果很好,所以谢谢你,但我只是想知道如何使用另一个页面的链接使其工作?我在第二个页面上有链接,链接回主页的某个部分,所以我使用了上面的代码,但将#header wrap ul li a改为。条目内容a但不起作用?这太棒了,正是我想要的效果,但有点奇怪,当我点击返回主页的外部链接时,它没有动画,这不是一个问题,它可以工作,但只是想知道为什么?@Duggy G你在主页上添加了第二个代码了吗?
nav#site-navigation {
    top: 98px;
}
.cbp-spmenu-right.menu-open {
    right: 23px !important;
}