collapse navbar at certain width javascript code example
Example: changing the bootstrap navbar break point
<nav class="navbar navbar-light navbar-expand-md">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar1">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar1">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</nav>
<!---- As you can see from the code above, the navbar-expand-md class in the nav would make this Navbar collapse vertically (and show the toggler icon) at the medium (md) breakpoint of 768px.
To change to a different breakpoint, we’d just need to swap out navbar-expand-md
to any of these navbar-expand = never collapses vertically (remains horizontal)
navbar-expand-sm = collapses below sm widths <576px
navbar-expand-md = collapses below md widths <768px
navbar-expand-lg = collapses below lg widths <992px
navbar-expand-xl = collapses below xl widths <1200px ----!>