如何制作固定在屏幕顶部的响应导航栏

Question

我正试图创建一个响应导航栏，它固定在页面顶部，链接高度为全高（100%），这样它们的背景颜色就可以改变。到目前为止，我只成功地修复了导航栏，并且这些链接在设备之间只是有点兼容。我将使用这种效果，即媒体查询强制菜单进入包含在图像中的导航。http://getbootstrap.com/examples/navbar-fixed-top/.我不喜欢bootstrap，我希望在将来自己能够做到这一点。有什么建议吗？

这是我的代码：

玉：

头

链接（rel=“stylesheet”，href=“/main.css”）

导航

ul

   li

       a(href="/") Home

       a(href="/about") About

       a(href="/contact") Contact

和

减：

导航

宽度：100%；

高度：3em；

顶部：0px；

左： 0px；

位置：固定；

背景-颜色：#000；

UL Li a{

   height:100%;

   text-align:center;

   margin-top: -3.5em;

   text-decoration:none;

   padding-right: 9%;

   padding-left: 9%;

   &:hover {

       color:#7f8c8d;

   }

}

}

Answer 1

我会重新考虑固定的标题定位，并加入一个绝对的方法。我个人不喜欢在我的方式中不断地使用标题，但是绝对可以通过下面的代码轻松地更改为固定。

以下是我通常会做的方式，以确保一切都保持领先。

HTML

<div id="wrapper">
<ul id="navBar">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>
</div>

CSS

html, body {
    margin:0;
    padding:0;
    min-width:100%;
    min-height:100%;
}
#wrapper {
    background:#AAA;
    width:100%;
    position:absolute;
    left:0;
    top:0;
}
ul {
    padding:0;
    margin:0;
}
li {
    float:left;
    min-width:50px;
    background:#CCC;
    list-style:none;
    vertical-align:middle;
    padding:15px;
}
li a {  
    color:#000;
}

或者把你自己摆弄掉：

对于媒体查询争吵，请尝试此方法。您可以调整小提琴窗口的大小。对于右下角的预览窗口，尝试将其减少到300px或更低。