For my navbar, I am attempting to set a custom breakpoint at 1080px where it switches to a hamburger menu. However, when I click on a dropdown option, the entire navbar expands instead of just the dropdown area.
@media (min-width: 1080px){
.navbar-expand-custom {
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
}
.navbar-expand-custom .navbar-nav {
flex-direction: row;
}
.navbar-expand-custom .navbar-nav .nav-link {
padding-right: .5rem;
padding-left: .5rem;
}
.navbar-expand-custom .navbar-collapse {
display: flex!important;
}
.navbar-expand-custom .navbar-toggler {
display: none;
}
}
HTML
<!-- Start of Navbar -->
<nav class="navbar navbar sticky-top navbar-toggler navbar-dark bg-dark navbar-expand-custom">
<a class="navbar-brand" href="#">
<img src="images/lone-eagle-flying-school-CLIFTON-white.png" height="130" alt="">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mx-auto">
<li class="nav-item active">
<a class="nav-link nav nav-collapsed" href="index.html">Home <span class="sr-only">(current)</span></a>
</li>
...
... (truncated for brevity)
... </li>
</ul>
</div>
</nav>
Using .navbar-expand-lg works fine, but switching to .navbar-expand-custom causes issues with how the navbar behaves after clicking a dropdown option. The custom breakpoint, however, functions correctly.