Menu
Is it possible to have multiple fixed-top navbars in Bootstrap 4 showing under each other?
The 1 currently overlays the other which is not what I want.
221
Use the .sticky-top class to make the navbar fixed/stay at the top of the page when you scroll past it.
First we need to get the bottom position of the . sticky-wrap and then take away the height of the secondary nav, so that we have the top position of the secondary navigation element on the page. We then take into account the users scroll position on the page to ensure we've always got the correct position.
In this article, we will demonstrate both the methods of aligning two navbars using CSS inbuilt classes as well as custom CSS styles. Example 1: In the first approach, we have made use of the inbuilt navbar class of Bootstrap 4. Two navbars are placed one after the other.
As of Bootstrap 4, you can use the spacing utilities. Add for instance px-2 in the classes of the nav-item to increase the padding. Would be better if you include more details about how to use it and an example.
Yes, it's possible but you have to position the 2nd one accordingly. The height of the Navbar is ~56px.
.fixed-top-2 { margin-top: 56px; } body { padding-top: 105px; } <nav class="navbar navbar-toggleable-sm bg-faded navbar-light fixed-top fixed-top-2"> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar1"> <span class="navbar-toggler-icon"></span> </button> <a href="/" class="navbar-brand">One</a> <div class="navbar-collapse collapse" id="navbar1"> <ul class="navbar-nav"> .. </ul> </div> </nav> <nav class="navbar navbar-toggleable-sm bg-inverse navbar-inverse fixed-top"> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar2"> <span class="navbar-toggler-icon"></span> </button> <a href="/" class="navbar-brand">Two</a> <div class="navbar-collapse collapse" id="navbar2"> <ul class="navbar-nav"> .. </ul> </div> </nav> Demo: Bootstrap 4 Multiple fixed-top Navbars
In some scenarios, it may be better to use a single fixed-top DIV to contain both.
Also see:
Bootstrap 4 Navbar sticky after header
Bootstrap 4 collapsing two navbars into one toggle button
56
Both navs can use sticky-top (instead of fixed-top) so you don't have to set the padding on the body.
The second navbar should use top so that the padding will only show when it nears the top.
padding-top will create padding before it hits the top navbar when the padding is necessary.
See here:
https://www.codeply.com/p/sIIXzlAW3V
28
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
