Geek Answers Handbook

Bootstrap 4 Multiple Fixed Top Navigation Bars

Is it possible for Bootstrap 4 to display multiple fixed-top navigation bars?

Currently 1 is overlapping another, which is not what I want.

+7
twitter-bootstrap twitter-bootstrap-4 bootstrap-4
source share
1 answer

Yes, it is possible, but you must put the second one. The height of the Navbar is ~ 56 pixels.

.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 might be better to use a single fixed-top DIV to contain both .

Also see: Boot file 4 Navigator is inserted after the header

+5
source share

More articles:


All Articles