2016-05-10 30 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

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