I'm trying to teach myself how to make a responsive collapsible navbar. I've managed to get the navbar to collapse when below a certain width and open down when the hamburger menu is clicked, but I'm struggling to get it to collapse back down when one of the links is clicked. For example, "Contact Us" will go to the right section of the page but the navbar will stay open.
$(document).ready(function() {
$nav = $('.nav');
$toggleCollapse = $('.toggle-collapse');
$toggleIcons = $('.toggle-icons');
/* Click Event Toggle Menu */
$toggleCollapse.click(function() {
$nav.toggleClass('collapse');
})
});.parent-fixed {
position: fixed;
width: 100%;
z-index: 99999;
}
.nav {
padding: 0 2rem;
height: 0rem;
min-height: 9vh;
overflow: hidden;
transition: height 1s ease-in-out;
}
.nav .nav-menu {
justify-content: space-between;
}
.nav .toggle-collapse {
position: absolute;
top: 0;
width: 90%;
cursor: pointer;
display: none;
}
.nav .toggle-collapse .toggle-icons {
display: flex;
justify-content: flex-end;
padding: 1.4rem 0;
}
.nav .toggle-collapse .toggle-icons i {
font-size: 1.4rem;
}
.collapse {
height: 20rem;
}
.nav .nav-items {
display: flex;
margin: 0;
padding: 0;
}
.nav .nav-items .nav-link {
padding: 1.4rem;
font-size: 1.1rem;
position: relative;
transition: all 0.2s ease;
}
.nav .nav-items .nav-link:hover {
background-color: white;
}
.nav .nav-items .nav-link:hover a {
color: var(--text-navy);
}
.nav .nav-brand a {
font-size: 1.3rem;
padding: 1.3rem 0;
text-decoration: none;
display: block;
font-family: Montserrat_Bold;
cursor: default;
}
.nav .social {
padding: 1.5rem 0;
}
.nav .social i {
padding: 0 0.2rem
}
.nav .social i:hover {
color: #989b9b;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent-fixed">
<nav class="nav">
<div class="nav-menu flex-row">
<div class="nav-brand">
<a href="#" class="text-navy">The Art of Data</a>
</div>
<div class="toggle-collapse">
<div class="toggle-icons">
<i class="fas fa-bars"></i>
</div>
</div>
<div>
<ul class="nav-items">
<li class="nav-link">
<a href="#" class="nav-icon">Home</a>
</li>
<li class="nav-link">
<a href="#preview-section" class="nav-icon">View Work</a>
</li>
<li class="nav-link">
<a href="#" class="nav-icon">Contact Me</a>
</li>
</ul>
</div>
<div class="social">
<a href="#"><i class="fab fa-linkedin"></i></a>
<a href="#"><i class="fab fa-github"></i></a>
<a href=""><i class="fab fa-twitter"></i></a>
</div>
</div>
</nav>
</div>