koku19 koku19 -4 years ago 68
CSS Question

responsive toggle navbar - using css only

I am trying to make a responsive toggle menu with css only and below is the code. Any kind of help will be appreciable. No javascript or jquery - only css. Below is the code snippet hope with css and html -it is clear.



* {
box-sizing: border-box;
}
.container{
max-width: 900px;
margin: 0 auto;
}
.p-t {
display: table;
width: 100%;
table-layout: fixed;
}
.p-t .p-to {
display: table-cell;
vertical-align: middle;
height: 100%;
}
.text-right {
text-align: right;
}
.p-header{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 80px;
background-color:#c6c6c6;
z-index: 1000;
}
.list-inline > li {
display: inline-block;
list-style: none;
}
.p-header .list-inline li a{
display: block;
text-decoration: none;
color: #FFFFFF;
font-size: 16px;
padding: 0 20px;
line-height: 80px;
}
.p-header .list-inline li.active a,
.p-header .list-inline li a:hover{
color: #FFFFFF;
opacity: 1;
}

<div class="p-header">
<div class="container">
<div class="p-t">
<div class="p-to"><a><img src="white.png"></a></div>
<div class="p-to text-right">
<ul class="list-inline header-menu">
<li><a>Home</a></li>
<li><a>BUsiness</a></li>
<li><a>About</a></li>
<li><a>Login</a></li>
</ul>
</div>
</div>
</div>
</div>




Answer Source

Unfortunatly toggling is impossible without a little bit of javascript. I suggest you give a an id. What ever you want to show/hide give it an id, for example navbar

<a id="nav-toggle" style="display: none"><img src="white.png"></a>
<div id="navbar">navbar ul goes in here</div>

To automatically hide the navbar up to a certain display width or height use a media query:

@media (max-width: 600px) {
    #nav-toggle {
        display: inline;
    }
    #navbar {
        display: none;
    }
}

You can do JS something like this:

var toggler = document.getElementById('nav-toggle');
var navbar = document.getElementById('navbar');
toggler.addEventListener('click', () => {
    if(navbar.style.display === 'none') {
        navbar.style.display = 'block';
    } else {
        navbar.style.display = 'none';
    }
});

JS Fiddle

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download