I am looking for a way to use 2 different breakpoints in my BS4 navbar. A number of menu items should be always collapsed, while different menu items only collapse on -sm screens. So, in the example below, options 4-6 should always be collapsed and options 1-3 should be visible on screens larger than -sm, and collapse into the same toggler on -sm screens. Both parts should be right-aligned, next to each other.
It should look like this on large screens: Large screen example
And like this on small screens: Small screen example
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<div class="container">
<a class="navbar-brand" href="#">Brand</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbars">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse navbars" id="navbar1">
<ul class="navbar-nav ml-auto">
<li class="nav-item"><a class="nav-link" href="#">Option 1</a> </li>
<li class="nav-item"><a class="nav-link" href="#">Option 2</a> </li>
<li class="nav-item"><a class="nav-link" href="#">Option 3</a> </li>
</ul>
</div>
<div class="collapse navbar-collapse navbars" id="navbar2">
<ul class="navbar-nav ml-auto">
<li class="nav-item"><a class="nav-link" href="#">Option 4</a> </li>
<li class="nav-item"><a class="nav-link" href="#">Option 5</a> </li>
<li class="nav-item"><a class="nav-link" href="#">Option 6</a> </li>
</ul>
</div>
</div>
</nav>
I have searched everywhere, but can't seem to find a solution. I have tried to combine two fixed-top navbars, but gives overlapping results when you click on the toggler. I have played around with '.navbar-collapse-sm' and similar classes, but that doesn't work either.
So is this even possible? Any help or tips would be much appreciated.
There would need to be some custom CSS to control #navbar1...
@media (min-width: 576px) {
#navbar1 {
display: flex !important;
flex-basis: auto;
}
/* prevent flicker during toggle */
#navbar1.collapsing {
transition: none;
height: auto;
}
#navbar1 .navbar-nav {
flex-direction: row;
}
}
And some changes to the navbar markup:
<nav class="navbar bg-dark navbar-dark">
<div class="container">
<a class="navbar-brand" href="#">Brand</a>
<button class="navbar-toggler order-sm-1" type="button" data-toggle="collapse" data-target=".navbars">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse order-sm-0 navbars" id="navbar1">
<ul class="navbar-nav ml-auto">
<li class="nav-item pr-sm-3"><a class="nav-link" href="#">Option 1</a> </li>
<li class="nav-item pr-sm-3"><a class="nav-link" href="#">Option 2</a> </li>
<li class="nav-item pr-sm-3"><a class="nav-link" href="#">Option 3</a> </li>
</ul>
</div>
<div class="collapse navbar-collapse navbars order-last" id="navbar2">
<ul class="navbar-nav ml-auto">
<li class="nav-item"><a class="nav-link" href="#">Option 4</a> </li>
<li class="nav-item"><a class="nav-link" href="#">Option 5</a> </li>
<li class="nav-item"><a class="nav-link" href="#">Option 6</a> </li>
</ul>
</div>
</div>
</nav>
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments