粘性导航栏不工作



我正试图为http://www.appledevice.expert创建一个粘性导航,但遇到了相当困难。

我试着用这些属性粘贴标题:-

position: fixed ;
width: 100% ;

它不起作用,把我所有的内容都扔到了标题下。然后,我尝试将导航栏包装在一个新的div类中以锚定它,但这也不起作用。

编辑并赋予您的标题一些属性(注释的新行):

#header {
    line-height: 98px;
    background: #FFF url("images/header-top.png") repeat-x top center;
    border-bottom: 1px solid #d3d5d7;
    -webkit-box-shadow: 0 0 5px 0 #e2e3e4;
    -moz-box-shadow: 0 0 5px 0 #e2e3e4;
    box-shadow: 0 0 5px 0 #e2e3e4;
    position: fixed; /*This is different*/
    z-index: 99999;
    margin-bottom: 30px;
    width: 100%; /*This is new*/
}

然后在最上面的div上添加一个上边距,使其等于页眉的高度:

.sections:first-of-type {
      margin-top: 110px;
}

为了解决主体在标题下移动的问题,我在主体内部应用了这个div代码;

div style="height:110px"

然后,主体向下移动div元素的高度,并为顶部导航栏留出空间。

相关内容

  • 没有找到相关文章

最新更新