Bootstrap 4 navbar with 2 rows - css

Question

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"><i class="fa fa-envelope-open-o fa-lg" aria-hidden="true"></i></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>

Answer 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"><i class="fa fa-envelope-o fa-lg mt-2" aria-hidden="true"></i></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

Answer 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"><i class="fa fa-envelope-open-o fa-lg" aria-hidden="true"></i></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>

Answer 3

<template>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand col-lg-1" href="#">
<img src="../assets/logo.png" alt="" width="30" height="24" class="d-inline-block align-text-top">
SMS-WEB
</a>
<!--me-auto mb-2 mb-lg-0 -->
<div class="collapse navbar-collapse flex-column ml-lg-0 ml-3 col-lg-11" id="navbarSupportedContent">
<ul class="navbar-nav col-lg-12 " >
<li class="nav-item col-lg-8">
<app-searchbox class=""></app-searchbox>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button></li>
<li class="nav-item " style="display:inline-flex;">
<span style="font-size: 2em; color: Tomato;" class="pr-2 text-wrap">
<fa icon="user" class=""/></span>
<div style="display:block">
<div class="row-1 " style="font-size:13px">
<a class="nav-link active p-0" href="#">Hello, Sign in</a>
</div>
<div class="row-2" style="font-size:15px"><span>My Account</span></div>
</div>
</li>
<li class="nav-item ">
<span style="font-size: 2em; color: Tomato;" class="pr-2 pl-3 text-wrap">
<fa icon="heart" class=""/></span>
</li>
<li class="nav-item " style="display:inline-flex;" id="nav-cart" >
<span style="font-size: 2em; color: Tomato;" class="pl-2 pr-2 text-wrap rounded-circle" >
<fa :icon="['fas', 'cart-plus']"></fa></span>
<div style="display:block">
<div class="row-1" style="font-size:13px">
<a class="nav-link active p-0" href="#">My cart</a>
</div>
<div class="row-2" style="font-size:15px" ><span>Rs: 2500/=</span>
</div>
</div>
<app-dropcart id="drop-cart"/>
</li>
</ul>
<ul class="navbar-nav flex-row mb-2 col-lg-12" >
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</div>
</nav>
</template>
<script>
import searchbox from '#/components/search.vue'
import dropCart from '#/components/drop-cart.vue'
export default {
name: 'navbar',
props: {
msg: String
},
components: {
'app-searchbox':searchbox,
'app-dropcart':dropCart
}
}
</script>
<style lang="sass">
</style>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand col-lg-1" href="#">
<img src="../assets/logo.png" alt="" width="30" height="24" class="d-inline-block align-text-top">
SMS-WEB
</a>
<!--me-auto mb-2 mb-lg-0 -->
<div class="collapse navbar-collapse flex-column ml-lg-0 ml-3 col-lg-11" id="navbarSupportedContent">
<ul class="navbar-nav col-lg-12 " >
<li class="nav-item col-lg-8">
<div class="container ">
<form class="d-flex">
<input class="form-control rounded-0 ml-5" type="search" placeholder="Search product here..." aria-label="Search">
<button class="btn btn-outline-success rounded-0" type="submit">Search</button>
</form>
</div>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button></li>
<li class="nav-item " style="display:inline-flex;">
<span style="font-size: 2em; color: Tomato;" class="pr-2 text-wrap">
<i class="fas fa-cart-plus"></i></span>
<div style="display:block">
<div class="row-1 " style="font-size:13px">
<a class="nav-link active p-0" href="#">Hello, Sign in</a>
</div>
<div class="row-2" style="font-size:15px"><span>My Account</span></div>
</div>
</li>
<li class="nav-item ">
<span style="font-size: 2em; color: Tomato;" class="pr-2 pl-3 text-wrap">
<i class="fas fa-cart-plus"></i></span>
</li>
<li class="nav-item " style="display:inline-flex;" id="nav-cart" >
<span style="font-size: 2em; color: Tomato;" class="pl-2 pr-2 text-wrap rounded-circle" >
<fa :icon="['fas', 'cart-plus']"></fa></span>
<div style="display:block">
<div class="row-1" style="font-size:13px">
<a class="nav-link active p-0" href="#">My cart</a>
</div>
<div class="row-2" style="font-size:15px" ><span>Rs: 2500/=</span>
</div>
</div>
<app-dropcart id="drop-cart"/>
</li>
</ul>
<ul class="navbar-nav flex-row mb-2 col-lg-12" >
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- help http://wa.me/[phone] -->