Is it possible to customize the breakpoint using bootstrap?
Here is the code:
<nav class="navbar navbar-expand-lg" style="background-color:#1B202C;">
<a class="navbar-brand" href="#"><img style="margin-left: 15px; margin-top: -20px;" class="logo" src="assets/logo.png" alt="logo"></a>
<button class="navbar-toggler" data-toggle="collapse" data-target="#collapsedNavBar"><span class="navbar-toggler-icon"></span></button>
<div class="fixed-nav">
<ul class="navbar-nav ">
<li id="nav-1" class="nav-item ">
<a class="nav-link" href="#">AAAAA</a>
</li>
<li id="nav-2" class="nav-item">
<a class="nav-link" href="#">BBBBB</a>
</li>
<li id="nav-3" class="nav-item">
<a class="nav-link" href="#">CCCCC</a>
</li>
</ul>
</div>
</nav>
However, when trying to override this by adding the following code to its style.css:
@media screen and (min-width:633px) and (max-width:1072px) {
.collapse {
display: none !important;
}
}
The navbar collapses at the custom breakpoint (1072px), but the hamburger icon still appears once it reaches -lg (≥992px). Is there a method to collapse at the custom width while still displaying the hamburger icon?
Thanks!