I am attempting to develop a responsive menu similar to the Bootstrap nav bar using only CSS. I have managed to get the functionality working, but the positioning of the menu grabber is incorrect and I'm unsure how to correct it. The grabber should align with the logo text, and the red box should only appear below the black bar along with the items.
HTML:
<div id="wrapper">
<div id="header" class="clearfix">
<span class="logo">Logo</span>
<input type="checkbox" id="navbar-checkbox" class="navbar-checkbox">
<nav class="nav-menu">
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="history.php">History</a></li>
<li><a href="reviews.php">Reviews</a></li>
<li><a href="#" class="menu-toggle">Menu</a></li>
<li><a href="location.php">Location</a></li>
</ul>
<label for="navbar-checkbox" class="navbar-handle"></label>
</nav>
</div>
</div>
CSS:
@media (min-width: 900px) {
.nav-menu {
font-size: 1em;
}
}
.nav-menu {
padding: 0.5em;
/*background: #eee;*/
/*border: 1px solid red;*/
min-height: 2em;
line-height: 1em;
}
.nav-menu ul {
transition: max-height 0.25s linear;
margin: 0;
padding: 8px 20px 8px;
text-align: center;
text-align: right;
border: 1px solid red;
}
.nav-menu li {
transition: visibility .25s linear;
display: inline-block;
margin: 0 .75em;
border: 1px solid blue;
}
.nav-menu li a {
display: block;
text-transform: uppercase;
padding: .70em 1em;
}
.nav-menu li a:hover {
display: block;
background: #ffed8b;
color: #000;
}
@media (max-width: 650px) {
.nav-menu ul {
max-height: 0;
overflow: hidden;
margin: 0 3.5em 0 1em;
}
.nav-menu li {
visibility: hidden;
display: block;
padding: 0.5em 0.6em;
}
.nav-menu .navbar-handle {
display: block;
float: right;
}
#navbar-checkbox:checked + .nav-menu ul {
max-height: 300px;
}
#navbar-checkbox:checked + .nav-menu li {
visibility: visible;
}
#navbar-checkbox:checked + .nav-menu .navbar-handle,
#navbar-checkbox:checked + .nav-menu .navbar-handle:after,
#navbar-checkbox:checked + .nav-menu .navbar-handle:before {
border-color: #aaa;
}
}
.navbar-checkbox {
display: none;
}
.navbar-handle {
display: none;
cursor: pointer;
position: relative;
font-size: 45px;
padding: .5em 0;
height: 0;
width: 1.6em;
border-top: 0.1em solid;
}
.navbar-handle:before,
.navbar-handle:after {
position: absolute;
left: 0;
right: 0;
content: ' ';
border-top: 0.1em solid;
}
.navbar-handle:before {
top: 0.3em;
}
.navbar-handle:after {
top: 0.8em;
}
.menu {
position: absolute;
top: 0;
left: 0;
right: 0;
}
.menu .navbar-handle {
position: absolute;
font-size: 1.2em;
top: 0.7em;
right: 12px;
z-index: 10;
}