Trying to implement a toggle button for the navigation bar. The objective is to hide the navbar on screens smaller than 667px and display a toggle button instead. Clicking the button should toggle the visibility of the navbar items.
The toggle button works correctly when the screen width is below 667px, but the navbar remains hidden on screens wider than 667px.
HTML
<div id="navbar" class="navbar">
<div class="logo">
<a href="index.html"><img src="images/logo.png" width="125px" alt="logo"></a>
</div>
<nav>
<ul class="slide">
<li><a href="#home">Home</a></li>
<li><a href="#products">Products</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
<a class="navbar-toggle">
<i class="fa fa-bars"></i>
</a>
</nav>
</div>
CSS
.navbar{
display: flex;
align-items: center;
padding: 20px;
}
.slide {
display: block;
}
.navbar-toggle {
flex: 1;
text-align: right;
display: inline-block;
list-style: none;
cursor: pointer;
display: none;
}
@media screen and (max-width: 667px) {
.navbar-toggle {
display: block;
}
.slide {
display: none;
}
}
JS
$(document).ready(function() {
$('.navbar-toggle').on('click', function(){
$('.slide').toggle();
return false;
});
});