2016-05-10 57 views
1

這是我的網站https://bed-sheet-2.myshopify.com/,增加了固定的位置頭部CSS位置固定頭不工作在我的網站

.site-header{z-index:110;position:fixed;width:100%;left:0;} 

它不工作在我的網站,如何解決這個問題。我搜索整個計算器,沒有解決。

+0

請複製的問題還是在這裏發佈的不是給出鏈接到你的網站必要的代碼,.. –

+0

@GuruprasadRao頭部分類網站的頭,我添加位置:固定,不工作 –

+0

您可以嘗試使用!重要...位置:固定!重要; –

回答

0

試試這個:.site-header{z-index:110;position:fixed;top:0px;left:0px;width:100%;} 您需要添加pxtop值。

+0

我更新頂級值,不工作固定標題。檢查網站 –

+0

好的,它應該工作。看看這個小提琴:https://jsfiddle.net/ug37w32n/1/,你會看到它在那裏工作。所以,你不能選擇正確的HTML元素,或者是重寫它。 –

+0

傑夫,我更新的代碼,不工作的位置:固定,檢查圖片http://imgur.com/mbPrbTK –

0

試試這個。保證金需要設置0px auto .site-header {width:100%; margin:0px auto;位置:固定;頂:0像素}

+0

我更新了谷歌瀏覽器檢查'margin:0px auto; ',沒有修改頭文件 –

0

演示爲:https://codepen.io/Guilh/pen/JLKbn

<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script> 
    <script> 
     var mn = $(".main-nav"); 
     mns = "main-nav-scrolled"; 
     hdr = $('header').height(); 

     $(window).scroll(function() { 
     if($(this).scrollTop() > hdr) { 
      mn.addClass(mns); 
      } else { 
      mn.removeClass(mns); 
      } 
     }); 
    </script> 

.main-nav{ 
    position: relative; 
} 
.main-nav { 
    background: #fff; 
    height: 80px; 
    z-index: 150; 
    margin-bottom: -80px; 
    box-shadow: 0 2px 3px rgba(0, 0, 0, .4); 
} 
header,.main-nav-scrolled { 
    position: fixed; 
    width: 100%; 
    top: 0; 
} 

<nav class="main-nav"> 
    <a href="#">Nav Link 1</a> 
    <a href="#">Nav Link 2</a> 
    <a href="#">Nav Link 3</a> 
    <a href="#">Nav Link 4</a> 
</nav> 
+0

添加一些解釋以使您的答案更有價值。 –