Bootstrap 4 navbar with 2 rows
Solution 1
You can use the flex-column
flexbox utility class to stack the 2 navs vertically next to the icon. This sets flex-direction: column
on the navbar-collapse
div so that it's child elements stack vertically.
<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse">
<div class="container">
<button class="navbar-toggler navbar-toggler-right align-self-center mt-3" type="button" data-toggle="collapse" data-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<h1 class="py-2 ml-lg-2 mx-3"><a href="#"><i class="fa fa-envelope-o fa-lg mt-2" aria-hidden="true"></i></a></h1>
<div class="collapse navbar-collapse flex-column ml-lg-0 ml-3" id="navbarCollapse">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Product</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Shop</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Events</a>
</li>
</ul>
<ul class="navbar-nav flex-row mb-2">
<li class="nav-item">
<a class="nav-link py-1 pr-3" href="#"><i class="fa fa-facebook"></i></a>
</li>
<li class="nav-item">
<a class="nav-link py-1 pr-3" href="#"><i class="fa fa-instagram"></i></a>
</li>
<li class="nav-item">
<a class="nav-link py-1 pr-3" href="#"><i class="fa fa-twitter"></i></a>
</li>
</ul>
</div>
</div>
</nav>
Demo - Bootstrap 4 navbar with 2 rows
Here's another variation with the 2 rows and right align search form:
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand my-auto" href="#">Brand</a>
<div class="collapse navbar-collapse flex-md-column" id="navbarCollapse">
<ul class="navbar-nav ml-auto small">
<li class="nav-item active">
<a class="nav-link" href="#">Shop</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Products</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Team</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Events</a>
</li>
</ul>
<form class="form-inline ml-auto">
...
</form>
</div>
</nav>
Demo - Navbar with 2 rows on right
Update for Bootstrap 4.0.0:
https://www.codeply.com/go/05hEHoiUvv
Here is an alternate scenario with 2 navbars with one mobile toggler
Bootstrap 4.0 - Two NavBars that collapse into one toggle
How can I have Brand and Navbar on separate lines?
How move 'nav' element under 'navbar-brand' in my Navbar
How to place navbar below sticky navbar using bootstrap 4?
Bootstrap 4 Multiple fixed-top navbars
Solution 2
The "variation with the 2 row aligned right" did not right-align the rows in Safari for me. I put the unordered lists in a new div with the flex-column
and ml-auto
classes.
<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse">
<div class="container">
<button class="navbar-toggler navbar-toggler-right align-self-center mt-3" type="button" data-toggle="collapse" data-target="#navbarCollapse"> <span class="navbar-toggler-icon"></span> </button>
<h1 class="py-2 ml-lg-2 mx-3"><a href="#"><i class="fa fa-envelope-open-o fa-lg" aria-hidden="true"></i></a></h1>
<div class="collapse navbar-collapse ml-lg-0 ml-3" id="navbarCollapse">
<div class="flex-column ml-auto">
<ul class="navbar-nav">
<li class="nav-item active"> <a class="nav-link" href="#">Home</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Product</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Shop</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">About</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Events</a> </li>
</ul>
<ul class="navbar-nav">
<li class="nav-item"> <a class="nav-link pr-3" href="#"><i class="fa fa-facebook"></i></a> </li>
<li class="nav-item"> <a class="nav-link pr-3" href="#"><i class="fa fa-instagram"></i></a> </li>
<li class="nav-item"> <a class="nav-link pr-3" href="#"><i class="fa fa-twitter"></i></a> </li>
</ul>
</div>
</div>
</div>
</nav>
Tom Michew
Updated on July 09, 2022Comments
-
Tom Michew almost 2 years
I have created a navbar with Bootstrap 4 alpha 6 that has a large brand/icon on the left, and 2 navbar-nav's with links to the right of the icon. One nav has links, and the other nav has icons. It's working exactly as I want except for one thing.
I'd like the 2 navbars to appear in 2 separate rows to the right of the icon. Like this:
------------------------------------------------------ link link link link brand-icon ------------------------------------------- icon icon icon ------------------------------------------------------
The mobile version will still show the links vertically as it does now. I've tried several different things with flexbox, but can't get it to work.
Here is my code:
<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse"> <div class="container"> <button class="navbar-toggler navbar-toggler-right align-self-center mt-3" type="button" data-toggle="collapse" data-target="#navbarCollapse"> <span class="navbar-toggler-icon"></span> </button> <h1 class="py-2 ml-lg-2 mx-3"><a href="#"><i class="fa fa-envelope-open-o fa-lg" aria-hidden="true"></i></a></h1> <div class="collapse navbar-collapse ml-lg-0 ml-3" id="navbarCollapse"> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Product</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Shop</a> </li> <li class="nav-item"> <a class="nav-link" href="#">About</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Events</a> </li> </ul> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link pr-3" href="#"><i class="fa fa-facebook"></i></a> </li> <li class="nav-item"> <a class="nav-link pr-3" href="#"><i class="fa fa-instagram"></i></a> </li> <li class="nav-item"> <a class="nav-link pr-3" href="#"><i class="fa fa-twitter"></i></a> </li> </ul> </div> </div> </nav>
-
Christoph almost 7 yearsIs this a question or an answer?
-
zackfett almost 7 years@Christoph Both, I guess.
-
joym8 over 3 yearsis there any way the 2nd Codeply's 2nd menu (social media) can occupy the entire width of the medium/large screens? I have tried everything I could but not getting anywhere.
-
Admin over 2 yearsPlease provide additional details in your answer. As it's currently written, it's hard to understand your solution.
-
DFBerry over 2 yearsIf you have a navbar that is fixed - how do you have two bars? <nav className="navbar navbar-expand-md navbar-dark fixed-top nav-background">