html - 固定顶部栏响应式导航的问题

Question

事情是这样的:我想为我正在处理的网站制作一个固定的顶部栏导航菜单。我还希望它具有响应性(它应该隐藏并显示 = 按钮以使其从顶部或 Canvas 外显示)。 我一直在研究这个解决方案 (css-tricks.com/responsive-menu-concepts/)，因为我更愿意只使用 CSS。 问题是我可以使用菜单，但是当我将导航容器的位置设置为 fixed 时，它停止工作，我不知道为什么。我找到了一些 questions在这里，但他们都没有帮助解决我的问题......

此外，如果您认为我最好使用像 JPanelMenu 这样的 Javascript 解决方案，请告诉我原因...

这是 code所以你可以检查一下

非常感谢您的帮助，并对他的链接感到抱歉(显然我需要更多的声誉才能使用两个以上的链接)...

这是 HTML

<div id="container-header">
  <header id="nav"> <a href="home.html" class="brand"><h2>Brand Name</h2></a>
    <!-- Checkbox hack -->
    <input type="checkbox" id="menu">
    <label for="menu" onclick></label>
    <nav role="off-canvas">
        <ul id="nav-main">
            <li><a href="#">item1</a>

            </li>
            <li><a href="#">item2</a>

            </li>
            <li><a href="#">item3</a>

            </li>
            <li><a href="#">item4</a>

            </li>
            <li><a href="#">item5</a>

            </li>
        </ul>
        <ul id="nav-sec">
            <li><a href="#">item6</a>

            </li>
            <li><a href="#">item7</a>

            </li>
        </ul>
    </nav>
</header>
</div>
<div class="content">
<section id="some-content">
        <h2>Sub-title</h2>

        <h1>Main Title</h1>
<span>something</span> | <a href="#">another thing</a>

</section>
</div>

这是 CSS

/* NAVIGATION */
 #container-header {
height: 2.4em;
background: #CCC;
overflow: hidden;
}
.brand {
font-family:"Amatic SC", Helvetica, sans-serif;
float: left;
}
.brand h2 {
line-height: 1.2em;
}
#nav-sec {
float: right;
}
#container-header li {
float: left;
background: #CCC;
margin: 0;
}
#container-header a {
display: block;
height: 2.4em;
line-height: 2em;
padding: 0 1.2em;
}
#container-header h2:hover, a:hover {
background: #000;
color: #FFF;
}
/* CHECKBOX HACK (MOBILE MENU) */
body {
-webkit-animation: bugfix infinite 1s;
}
@-webkit-keyframes bugfix {
from {
    padding: 0;
}
to {
    padding: 0;
}
}
input[type=checkbox] {
position: absolute;
top: -9999px;
left: -9999px;
}
label {
position: absolute;
right: 3.2em;
display: none;
width: 2.8em;
height: 2.4em;
color: #333;
transition: color .3s ease-in-out;
cursor: pointer;
user-select: none;
margin: 0;
}
@media screen and (max-width: 50em) {
html, body {
    margin: 0;
    overflow-x: hidden;
}
nav[role="off-canvas"] {
    position: absolute;
    top: 2.4em;
    left: -30em;
    width: 100%;
    opacity: 0;
}
nav[role="off-canvas"] ul > li {
    height: 100%;
    width: 100%;
    text-align: left;
    margin: 0;
}
#nav-sec {
    float: none;
}
label {
    display: block;
}
label:after {
    position: absolute;
    right: .4em;
    top: 0;
    content:"\2261";
    font-size: 2em;
}
label:hover, input:checked ~ label {
    color: #FFF;
}
input:checked ~ nav[role="off-canvas"] {
    opacity: 1;
    left: 0;
}
input:checked ~ .content {
    margin-left: 20.5em;
    margin-right: -20.5em;
}
}
/* CONTENT */
#some-content {
clear: both;
height: 20em;
background: #09B2B3;
}
#some-content {
color: #FFF;
}
#some-content a {
color: #FFF;
text-decoration: none;
}
#some-content a:hover {
text-decoration: underline;
}

Answer 1

当一个元素是固定的时，它需要它的坐标和/或宽度，这取决于具体情况。此外，css 重置位于 css 的顶部，在所有其他 css 之前。你有你的最后一个，这将防止对其他元素的操纵并导致各种挫败感。

   /* NAVIGATION */
     #container-header {
        height: 2.4em;
        background: #ccc;
        position:fixed;
        top:0;
        left:0;
        right:0;
    }


    body {padding-top:2.4em;} /* height of fixed header */