Looking to create a responsive navigation bar similar to the one shown here
My code successfully shows and hides the navigation items, but it's not updating the burger icon
No console errors or warnings are present
This is my HTML:
<nav>
<div class="container">
<div class="logo">Landing</div>
<ul class="menu">
<li class="toggle"><a href="#"><i class="fa fa-bars"></i></a></li>
<li class="item">Home</li>
<li class="item">Features</li>
<li class="item">Reviews</li>
<li class="item">Pricing</li>
<li class="item">FAQ</li>
<li class="item">Get Started</li>
</ul>
</div>
</nav>
CSS styling:
@media screen and (min-width: 481px) and (max-width: 768px) {
nav ul{
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
nav .toggle {
flex: 1;
text-align: right;
order: 2;
display: block;
}
nav .item {
order: 2;
width: 100%;
text-align: center;
display: none;
}
.active-menu .item {
display: block;
}
}
JQuery implementation:
const toggle = document.querySelector(".toggle");
const menu = document.querySelector(".menu");
function toggleMenu(){
if($(menu).hasClass('active-menu')){
$(menu).removeClass('active-menu');
$(toggle).has('a').html('<i class="fa fa-bars"></i>');
} else {
$(menu).addClass('active-menu');
$(toggle).has('a').html('<i class=\'fa fa-times\'></i>');
}
}
$(toggle).click(toggleMenu)
The navigation uses a flex display layout
I haven't been able to publish it on GitHub since I'm not very familiar with the platform