粘性菜單問題

我在我的WordPress站點上有一個粘性菜單，它只是一個固定了css位置的標題，但它覆蓋在每個部分的頂部。你可以看到我的意思，如果你查看測試網站here 粘性菜單問題

如果你點擊菜單圖標，然後點擊一個部分，它將導航到每個部分，但我需要粘性菜單來休息，而不是覆蓋每個部分在頂部。

在我的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; 
}

來源

2016-02-19 Duggy G

請在此處添加有意義的代碼和問題描述。請不要鏈接到需要修復的網站 - 否則，一旦問題得到解決，或者您鏈接到的網站無法訪問，此問題將對未來的訪問者失去任何價值。發佈 [最小，完整和可驗證示例（MCVE）]（http://stackoverflow.com/help/mcve）顯示您的問題將幫助您獲得更好的答案。欲瞭解更多信息，請參閱 [我網站上的某些內容不起作用。我可以只粘貼一個鏈接嗎？]（http://meta.stackexchange.com/questions/125997/）謝謝！ – j08691

該代碼會做

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

來源

2016-02-19 19:17:03

這在我的主頁上使用我的導航鏈接很好用，所以謝謝，但只是想知道如何使用其他頁面的鏈接來工作？我有第二頁上的鏈接，鏈接到主頁上的某個部分，所以我使用了上面的代碼，但是改變了＃header-wrap ul li a到.entry-content a，但它不起作用？ –

@Duggy G在編輯中添加的代碼 –

這真是太棒了，完全按照我的想法工作，但有點好奇，當我點擊外部鏈接返回到主頁時，它沒有生成動畫，這不是一個問題，而是工作，但只是想知道爲什麼？ –

這應該可以完成這項工作。我正確地增加了位置，所以你得到了側面的白色條，我應用了一個重要的標籤，否則它會被覆蓋。

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

來源

2016-02-19 19:28:13

粘性菜單問題

回答

相關問題