I've been experimenting with making my navbar collapsible using Flexbox. Initially, I was able to toggle the navbar correctly when the screen size is smaller. However, I encountered an issue where the navigation items do not reappear when I hide them on a smaller screen and then expand the screen size. Additionally, if I leave the navigation items open on a smaller screen and then enlarge the screen, the flex direction of the nav items switches to column orientation, which is not desired on larger screens.
Below is the snippet of my code:
$(".toggle-btn").click(function() {
$(".nav-toggle").slideToggle("slow");
});/* header */
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 2em;
background-color: #FFB600;
box-shadow: 0 1px 20px #48493e;
z-index: 1;
}
header ul {
display: flex;
}
/*slide menu*/
.nav-btn {
display: none;
position: absolute;
top: 0;
right: 0;
margin: 3.5em 4em 0 0;
}
.toggle-btn {
position: relative;
padding: 0;
width: 4em;
height: 2em;
cursor: pointer;
outline: none;
font-size: 1.2em;
font-family: 'Dosis', sans-serif;
font-weight: bold;
box-shadow: 5px 5px 5px 1px #000;
text-transform: uppercase;
border-radius: 4px;
border: solid 2px #000;
background-color: transparent;
}
.toglge-btn:active {
box-shadow: 3px 3px 5px 1px #000;
top: 2px;
}
@media all and (max-width: 820px) {
header {
flex-direction: column;
}
.nav-brand {
align-self: flex-start;
}
.nav-btn {
display: block;
}
header ul {
flex-direction: column;
text-align: center;
display: none;
}
.nav-items {
line-height: 2;
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<h2 class="nav-brand"><a href="/"> Tequila Grill</a></h2>
<div class="nav-btn">
<button class="toggle-btn">Menu</button>
</div>
<ul class="nav-toggle">
<li><a class="nav-items" href="/">Home</a></li>
<li><a class="nav-items" href="/menu">Menu</a></li>
<li><a class="nav-items" href="/hours">Hours</a></li>
<li><a class="nav-items" href="/location">Location</a></li>
<li><a class="nav-items" href="/catering">Catering</a></li>
</ul>
</header>