Problems with fixed top bar responsive navigation

Question

Here´s the thing: I want to make a fixed top bar navigation menu for a website i¨m working on. I also want it to be responsive (it should hide and show = button to make it appear from the top or off-canvas). I´ve been playing around with this solutions ( css-tricks.com/responsive-menu-concepts/ ) as I would prefer to use CSS only. The problem is that i got the menu to work but when I set the nav container's position to fixed it stops working and I can't figure out why. I found some questions here but none of them helped with my problem...

Also, if you think I'd be better of with a Javascript solution like JPanelMenu could tell me why...

Here's the code so you can check it out

Would really appreciate your help and sorry about he links (apparently I need more reputation before using more than two links)...

Here's the 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>

And here's the 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

When an element is fixed, it needs its coordinates and/or a width depending on the circumstances. Also, css resets are in the top of the css, before all other css. You have yours last, this will prevent manipulation to other elements and cause all kinds of frustration.

   /* 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 */