Navbars
Navbar Colors
Theming the navbar has never been easier thanks to the combination of theming classes and background-color utilities. Choose from .navbar-light for use with light background colors, or .navbar-inverse for dark background colors. Then, customize with .bg-* utilities.
<nav class="navbar navbar-expand-lg navbar-light bg-white">
<div class="container">
<a class="navbar-brand" href="#x">
<img src="../assets/images/logo.png" alt="" class="hide-dark-mode d-ib">
<img src="../assets/images/logo-light.png" alt="" class="hide-light-mode d-ib">
</a>
<button class="navbar-toggler collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-toggle1" aria-controls="navbar-toggle1" aria-expanded="false" aria-label="Toggle navigation">
<span class="icon-bar top-bar"></span>
<span class="icon-bar middle-bar"></span>
<span class="icon-bar bottom-bar"></span>
<span class="sr-only">Toggle navigation</span>
</button><!-- / navbar-toggler -->
<div class="collapse navbar-collapse" id="navbar-toggle1">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#x"><span>Home</span></a>
</li><!-- / nav-item -->
<li class="nav-item">
<a class="nav-link" href="#x"><span>About</span></a>
</li><!-- / nav-item -->
</ul><!-- / navbar-nav -->
<ul class="navbar-button p-0 m-0 ml-25">
<li class="nav-item">
<a href="#x" class="btn btn-primary"><i class="bi-cart3 mr-5 va-middle"></i> <span>Buy Now</span></a>
</li>
</ul><!-- / navbar-button -->
</div><!-- / navbar-collapse -->
</div><!-- / container-fluid -->
</nav><!-- / navbar-light -->
Menu Lines
The Menu Line effect can be accomplished by adding .menu-line CSS Class to the navbar and wrap all nav-links in <span> tags.
<nav class="navbar navbar-expand-lg navbar-light bg-white menu-line">
<div class="container">
<a class="navbar-brand" href="#x">
<img src="../assets/images/logo.png" alt="" class="hide-dark-mode d-ib">
<img src="../assets/images/logo-light.png" alt="" class="hide-light-mode d-ib">
</a>
<button class="navbar-toggler collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-toggle-line" aria-controls="navbar-toggle-line" aria-expanded="false" aria-label="Toggle navigation">
<span class="icon-bar top-bar"></span>
<span class="icon-bar middle-bar"></span>
<span class="icon-bar bottom-bar"></span>
<span class="sr-only">Toggle navigation</span>
</button><!-- / navbar-toggler -->
<div class="collapse navbar-collapse" id="navbar-toggle-line">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#x"><span>Home</span></a>
</li><!-- / nav-item -->
<li class="nav-item">
<a class="nav-link" href="#x"><span>Page</span></a>
</li><!-- / nav-item -->
</ul><!-- / navbar-nav -->
<ul class="navbar-button p-0 m-0 ml-25">
<li class="nav-item">
<a href="#x" class="btn btn-primary"><i class="bi-star mr-5 va-middle"></i> <span>Button</span></a>
</li>
</ul><!-- / navbar-button -->
</div><!-- / navbar-collapse -->
</div><!-- / container-fluid -->
</nav><!-- / navbar -->
Menu Pills
The Menu Pills style can be accomplished by adding .custom-menu.menu-pills CSS Class to the navbar, the pills will be showing on active nav-links and on nav-link hover.
<nav class="navbar navbar-expand-lg navbar-light bg-white custom-menu menu-pills">
<div class="container">
<a class="navbar-brand" href="#x">
<img src="../assets/images/logo.png" alt="" class="hide-dark-mode d-ib">
<img src="../assets/images/logo-light.png" alt="" class="hide-light-mode d-ib">
</a>
<button class="navbar-toggler collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-toggle-pills" aria-controls="navbar-toggle-pills" aria-expanded="false" aria-label="Toggle navigation">
<span class="icon-bar top-bar"></span>
<span class="icon-bar middle-bar"></span>
<span class="icon-bar bottom-bar"></span>
<span class="sr-only">Toggle navigation</span>
</button><!-- / navbar-toggler -->
<div class="collapse navbar-collapse" id="navbar-toggle-pills">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link active" href="#x"><i class="bi-house-door mr-5"></i> <span>Home</span></a>
</li><!-- / nav-item -->
<li class="nav-item">
<a class="nav-link" href="#x"><i class="bi-envelope-open mr-5"></i> <span>Contact</span></a>
</li><!-- / nav-item -->
</ul><!-- / navbar-nav -->
</div><!-- / navbar-collapse -->
</div><!-- / container-fluid -->
</nav><!-- / navbar -->
Split Menu
The Split Menu layout can be accomplished by adding .custom-menu.split-menu CSS Class to the navbar and there are 2 navbar-barnds, one splitting the 2 navbar-toggles to accomplish the split layout.
<nav class="navbar navbar-expand-lg navbar-light bg-white custom-menu split-menu">
<div class="container">
<button class="navbar-toggler collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-toggle-split-left" aria-controls="navbar-toggle-split-left" aria-expanded="false" aria-label="Toggle navigation">
<span class="icon-bar top-bar"></span>
<span class="icon-bar middle-bar"></span>
<span class="icon-bar bottom-bar"></span>
<span class="sr-only">Toggle navigation</span>
</button><!-- / navbar-toggler -->
<a class="navbar-brand mobile-brand m-auto" href="#x"><img src="../assets/images/logo-small.png" alt=""></a>
<button class="navbar-toggler collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-toggle-split-right" aria-controls="navbar-toggle-split-right" aria-expanded="false" aria-label="Toggle navigation">
<span class="icon-bar top-bar"></span>
<span class="icon-bar middle-bar"></span>
<span class="icon-bar bottom-bar"></span>
<span class="sr-only">Toggle navigation</span>
</button><!-- / navbar-toggler -->
<div class="collapse navbar-collapse" id="navbar-toggle-split-left">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link active pl-0" href="#x"><span>Active</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#x"><span>Link</span></a>
</li>
</ul><!-- / navbar-nav -->
</div><!-- / navbar-collapse -->
<a class="navbar-brand m-auto" href="#x"><img src="../assets/images/logo-small.png" alt=""></a>
<div class="collapse navbar-collapse" id="navbar-toggle-split-right">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#x"><span>Right</span></a>
</li>
<li class="nav-item">
<a class="nav-link last-menu-item" href="#x"><span>Link</span></a>
</li>
</ul><!-- / navbar-nav -->
</div><!-- / navbar-collapse -->
</div><!-- / container -->
</nav><!-- / navbar -->
Center Menu
The Center Menu layout can be accomplished by adding .m-auto CSS Class to the navbar-nav. Additionally, we can add a button using navbar-button, form, icon(s) or any small content to the right of the menu to avoid having a blank space on the right, on this example we are using a navbar-button.
<nav class="navbar navbar-expand-lg navbar-light bg-white">
<div class="container">
<a class="navbar-brand" href="#x">
<img src="../assets/images/logo.png" alt="" class="hide-dark-mode d-ib">
<img src="../assets/images/logo-light.png" alt="" class="hide-light-mode d-ib">
</a>
<button class="navbar-toggler collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-toggle-nav-center" aria-controls="navbar-toggle-nav-center" aria-expanded="false" aria-label="Toggle navigation">
<span class="icon-bar top-bar"></span>
<span class="icon-bar middle-bar"></span>
<span class="icon-bar bottom-bar"></span>
<span class="sr-only">Toggle navigation</span>
</button><!-- / navbar-toggler -->
<div class="collapse navbar-collapse" id="navbar-toggle-nav-center">
<ul class="navbar-nav m-auto">
<li class="nav-item">
<a class="nav-link active" href="#x">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#x">Link</a>
</li>
</ul><!-- / navbar-nav -->
<ul class="navbar-button">
<li class="nav-item">
<a href="#x" class="btn btn-primary nav-button"><i class="bi-cart3 mr-10"></i><span>Buy Now</span></a>
</li>
</ul><!-- / navbar-button -->
</div><!-- / navbar-collapse -->
</div><!-- / container -->
</nav><!-- / navbar -->
Stacked Menu
The Stacked Menu layout can be accomplished by adding .stacked-menu CSS Class to the navbar and .m-auto to the navbar-nav.
<nav class="navbar navbar-expand-lg navbar-light bg-white stacked-menu">
<div class="container">
<a class="navbar-brand" href="#x">
<img src="../assets/images/logo.png" alt="" class="hide-dark-mode d-ib">
<img src="../assets/images/logo-light.png" alt="" class="hide-light-mode d-ib">
</a>
<button class="navbar-toggler collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-toggle-nav-stacked" aria-controls="navbar-toggle-nav-stacked" aria-expanded="false" aria-label="Toggle navigation">
<span class="icon-bar top-bar"></span>
<span class="icon-bar middle-bar"></span>
<span class="icon-bar bottom-bar"></span>
<span class="sr-only">Toggle navigation</span>
</button><!-- / navbar-toggler -->
<div class="collapse navbar-collapse" id="navbar-toggle-nav-stacked">
<ul class="navbar-nav m-auto">
<li class="nav-item">
<a class="nav-link active" href="#x">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#x">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#x">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#x">Contact</a>
</li>
</ul><!-- / navbar-nav -->
</div><!-- / navbar-collapse -->
</div><!-- / container -->
</nav><!-- / navbar -->