Responsive navigation header, the navbar. Includes support for branding, navigation, and more, including support
for
our collapse plugin.
Read the official
Bootstrap Documentation for a full list of
instructions and
other options.
Here’s an example of all the sub-components included in a responsive light-themed navbar that automatically
collapses at the lg
(large) breakpoint.
<nav class="navbar navbar-expand-lg navbar-light bg-navbar-theme">
<div class="container-fluid">
<a class="navbar-brand" href="javascript:void(0)">Navbar</a>
<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>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="javascript:void(0)">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0)">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="javascript:void(0)" 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="javascript:void(0)">Action</a></li>
<li><a class="dropdown-item" href="javascript:void(0)">Another action</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="javascript:void(0)">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="javascript:void(0)" tabindex="-1" >Disabled</a>
</li>
</ul>
<form class="d-flex" action="javascript:void(0)">
<input class="form-control form-control-sm me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-primary" type="submit">Search</button>
</form>
</div>
</div>
</nav>
.layout-navbar-fixed
class to <html>
tag for Fixed
navbar.
Navbar come with built-in support for a handful of sub-components as below.
Brand
The .navbar-brand
can be applied to most elements, but an anchor works best as some elements
might
require utility classes or custom styles.
<nav class="navbar navbar-light bg-white">
<div class="container-fluid">
<a class="navbar-brand fw-bold" href="javascript:void(0);">Navbar</a>
</div>
</nav>
Nav
Navbar navigation links build on our .nav
options with their own modifier class and require the
use of
toggler classes for proper responsive styling.
<nav class="navbar navbar-expand-lg navbar-light bg-white">
<div class="container-fluid">
<a class="navbar-brand" href="javascript:void(0);">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="javascript:void(0);">Home <span class="visually-hidden">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0);">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0);">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="javascript:void(0);" tabindex="-1" >Disabled</a>
</li>
</ul>
</div>
</div>
</nav>
Form
Place various form controls and components within a navbar with .d-flex
.
<nav class="navbar navbar-light bg-white">
<div class="container-fluid">
<a class="navbar-brand">Navbar</a>
<form class="d-flex" action="javascript:void(0)">
<input class="form-control form-control-sm me-sm-2" type="search" placeholder="Search" aria-label="Search" />
<button class="btn btn-outline-primary my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
Text
Navbar may contain bits of text with the help of .navbar-text
. This class adjusts vertical
alignment
and horizontal spacing for strings of text.
<nav class="navbar navbar-expand-xl bg-navbar-theme">
<div class="container-fluid">
<a class="navbar-brand" href="javascript:void(0)">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-ex-2">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar-ex-2">
<div class="navbar-nav me-auto">
<a class="nav-item nav-link active" href="javascript:void(0)">Home</a>
<a class="nav-item nav-link" href="javascript:void(0)">About</a>
<a class="nav-item nav-link" href="javascript:void(0)">Contact</a>
</div>
<span class="navbar-text">
Navbar text with an inline element
</span>
</div>
</div>
</nav>
Default bootstrap dropdown open on click. Use dropdown-hover.js
and with the help of
data-trigger="hover"
attribute dropdown will open on hover.
<script src="assets/vendor/js/dropdown-hover.js"></script>
<nav class="navbar navbar-expand-lg bg-navbar-theme">
<div class="container-fluid">
<a class="navbar-brand" href="javascript:void(0)">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-ex-15">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar-ex-15">
<ul class="navbar-nav me-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="javascript:void(0)" data-bs-toggle="dropdown" data-trigger="hover">Dropdown</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0)">Action</a>
<a class="dropdown-item" href="javascript:void(0)">Another action</a>
<a class="dropdown-item" href="javascript:void(0)">Something else here</a>
</div>
</li>
</ul>
</div>
</nav>
Mega menu is a drop-down menu lets you pack your web app entire navigation into a single menu. In order to
create
Mega Dropdown you need to include mega-dropdown.js
.
<script src="assets/vendor/js/mega-dropdown.js"></script>
Use .mega-dropdown
to create mega dropdown, Add .mega-link
class to the element to
close
menu on click. Check below example for usage.
<nav class="navbar navbar-example navbar-expand-lg" style="z-index: 21">
<div class="container-fluid">
<a class="navbar-brand" href="javascript:void(0)">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-ex-14">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar-ex-14">
<ul class="navbar-nav me-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="javascript:void(0);" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0)">Action</a>
<a class="dropdown-item" href="javascript:void(0)">Another action</a>
<a class="dropdown-item" href="javascript:void(0)">Something else here</a>
</div>
</li>
<li class="nav-item mega-dropdown">
<a class="nav-link dropdown-toggle navbar-ex-14-mega-dropdown mega-dropdown" href="javascript:void(0);" aria-expanded="false" data-bs-toggle="mega-dropdown">Mega</a>
<div class="dropdown-menu px-4 py-0">
<div class="row row-bordered">
<div class="col-sm-6 col-lg p-4">
<h6 class="m-2">Applications</h6>
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link mega-dropdown-link" href="javascript:void(0)"><i class="tf-icons ri-mail-line me-1"></i>Email</a>
</li>
<li class="nav-item">
<a class="nav-link mega-dropdown-link" href="javascript:void(0)"><i class="tf-icons ri-question-answer-line me-1"></i>Chat</a>
</li>
<li class="nav-item">
<a class="nav-link mega-dropdown-link" href="javascript:void(0)"><i class="tf-icons ri-clipboard-line me-1"></i>ToDos</a>
</li>
<li class="nav-item">
<a class="nav-link mega-dropdown-link" href="javascript:void(0)"><i class="tf-icons ri-calendar-2-line me-1"></i>Calender</a>
</li>
<li class="nav-item">
<a class="nav-link mega-dropdown-link disabled" href="javascript:void(0)" tabindex="-1"><i class="tf-icons ri-prohibited-line me-1"></i>Disabled</a>
</li>
</ul>
</div>
<div class="col-sm-6 col-lg p-4">
<h6 class="m-2">Useful Links</h6>
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link mega-dropdown-link" href="javascript:void(0)">Profit Margins</a>
</li>
<li class="nav-item">
<a class="nav-link mega-dropdown-link" href="javascript:void(0)">Overall Profits</a>
</li>
<li class="nav-item">
<a class="nav-link mega-dropdown-link" href="javascript:void(0)">Gross Profits</a>
</li>
<li class="nav-item">
<a class="nav-link mega-dropdown-link" href="javascript:void(0)">Net Profits</a>
</li>
<li class="nav-item">
<a class="nav-link mega-dropdown-link" href="javascript:void(0)">Quarterly Profits</a>
</li>
</ul>
</div>
<div class="col-sm-6 col-lg p-4">
<h6 class="my-2">List Group</h6>
<div class="list-group">
<a href="javascript:void(0)" class="list-group-item list-group-item-action mega-dropdown-link">Analytical Reports</a>
<a href="javascript:void(0)" class="list-group-item list-group-item-action mega-dropdown-link">Operational Growth</a>
<a href="javascript:void(0)" class="list-group-item list-group-item-action mega-dropdown-link">Files and Directories</a>
<a href="javascript:void(0)" class="list-group-item list-group-item-action mega-dropdown-link">Audit & Logs</a>
<a href="javascript:void(0)" class="list-group-item list-group-item-action mega-dropdown-link">Customer CRM</a>
</div>
</div>
<div class="col-sm-6 col-lg p-4 mt-4">
<form action="javascript:void(0)">
<div class="form-floating form-floating-outline mb-4">
<input type="email" class="form-control" id="exampleDropdownFormEmail2" placeholder="email@example.com" />
<label for="exampleDropdownFormEmail2">Email address</label>
</div>
<div class="form-floating form-floating-outline mb-4">
<input type="password" class="form-control" id="exampleDropdownFormPassword2" placeholder="Password" />
<label for="exampleDropdownFormPassword2">Password</label>
</div>
<div class="mb-3">
<div class="form-check">
<input type="checkbox" class="form-check-input" id="dropdownCheck" />
<label class="form-check-label" for="dropdownCheck">
Remember me
</label>
</div>
</div>
<button type="submit" class="btn btn-primary">Sign in</button>
</form>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</nav>
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-dark
for dark background colors. Then, customize with .bg-*
utilities.
Create navbar with Primary Color scheme by using .navbar-dark
& .bg-primary
classes along with .navbar
.
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<div class="container-fluid">
<a class="navbar-brand" href="javascript:void(0)">Primary</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-ex-7">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar-ex-7">
<div class="navbar-nav me-auto">
<a class="nav-item nav-link active" href="javascript:void(0)">Home</a>
<a class="nav-item nav-link" href="javascript:void(0)">About</a>
<a class="nav-item nav-link" href="javascript:void(0)">Contact</a>
<a class="nav-item nav-link disabled" href="javascript:void(0)">Disabled</a>
</div>
<ul class="navbar-nav ms-lg-auto">
<li class="nav-item">
<a class="nav-link" href="javascript:void(0)"><i class="tf-icons navbar-icon ri-user-3-line me-1"></i>Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0)"><i class="tf-icons navbar-icon ri-settings-3-line me-1"></i>Settings</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0)"><i class="tf-icons navbar-icon ri-lock-2-line me-1"></i>Logout</a>
</li>
</ul>
</div>
</div>
</nav>
Create navbar with Secondary Color scheme by using .navbar-dark
& .bg-secondary
classes along with .navbar
.
<nav class="navbar navbar-expand-lg navbar-dark bg-secondary">
<div class="container-fluid">
<a class="navbar-brand" href="javascript:void(0)">Primary</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-ex-7">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar-ex-7">
<div class="navbar-nav me-auto">
<a class="nav-item nav-link active" href="javascript:void(0)">Home</a>
<a class="nav-item nav-link" href="javascript:void(0)">About</a>
<a class="nav-item nav-link" href="javascript:void(0)">Contact</a>
<a class="nav-item nav-link disabled" href="javascript:void(0)">Disabled</a>
</div>
<ul class="navbar-nav ms-lg-auto">
<li class="nav-item">
<a class="nav-link" href="javascript:void(0)"><i class="tf-icons navbar-icon ri-user-3-line me-1"></i>Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0)"><i class="tf-icons navbar-icon ri-settings-3-line me-1"></i>Settings</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0)"><i class="tf-icons navbar-icon ri-lock-2-line me-1"></i>Logout</a>
</li>
</ul>
</div>
</div>
</nav>
Create navbar with Success Color scheme by using .navbar-dark
& .bg-success
classes along with .navbar
.
<nav class="navbar navbar-expand-lg navbar-dark bg-succes">
<div class="container-fluid">
<a class="navbar-brand" href="javascript:void(0)">Primary</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-ex-7">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar-ex-7">
<div class="navbar-nav me-auto">
<a class="nav-item nav-link active" href="javascript:void(0)">Home</a>
<a class="nav-item nav-link" href="javascript:void(0)">About</a>
<a class="nav-item nav-link" href="javascript:void(0)">Contact</a>
<a class="nav-item nav-link disabled" href="javascript:void(0)">Disabled</a>
</div>
<ul class="navbar-nav ms-lg-auto">
<li class="nav-item">
<a class="nav-link" href="javascript:void(0)"><i class="tf-icons navbar-icon ri-user-3-line me-1"></i>Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0)"><i class="tf-icons navbar-icon ri-settings-3-line me-1"></i>Settings</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0)"><i class="tf-icons navbar-icon ri-lock-2-line me-1"></i>Logout</a>
</li>
</ul>
</div>
</div>
</nav>
Create navbar with Danger Color scheme by using .navbar-dark
& .bg-danger
classes along with .navbar
.
<nav class="navbar navbar-expand-lg navbar-dark bg-danger">
<div class="container-fluid">
<a class="navbar-brand" href="javascript:void(0)">Primary</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-ex-7">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar-ex-7">
<div class="navbar-nav me-auto">
<a class="nav-item nav-link active" href="javascript:void(0)">Home</a>
<a class="nav-item nav-link" href="javascript:void(0)">About</a>
<a class="nav-item nav-link" href="javascript:void(0)">Contact</a>
<a class="nav-item nav-link disabled" href="javascript:void(0)">Disabled</a>
</div>
<ul class="navbar-nav ms-lg-auto">
<li class="nav-item">
<a class="nav-link" href="javascript:void(0)"><i class="tf-icons navbar-icon ri-user-3-line me-1"></i>Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0)"><i class="tf-icons navbar-icon ri-settings-3-line me-1"></i>Settings</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0)"><i class="tf-icons navbar-icon ri-lock-2-line me-1"></i>Logout</a>
</li>
</ul>
</div> </div>
</nav>
Create navbar with Warning Color scheme by using .navbar-dark
& .bg-warning
classes along with .navbar
.
<nav class="navbar navbar-expand-lg navbar-dark bg-warning">
<div class="container-fluid">
<a class="navbar-brand" href="javascript:void(0)">Primary</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-ex-7">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar-ex-7">
<div class="navbar-nav me-auto">
<a class="nav-item nav-link active" href="javascript:void(0)">Home</a>
<a class="nav-item nav-link" href="javascript:void(0)">About</a>
<a class="nav-item nav-link" href="javascript:void(0)">Contact</a>
<a class="nav-item nav-link disabled" href="javascript:void(0)">Disabled</a>
</div>
<ul class="navbar-nav ms-lg-auto">
<li class="nav-item">
<a class="nav-link" href="javascript:void(0)"><i class="tf-icons navbar-icon ri-user-3-line me-1"></i>Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0)"><i class="tf-icons navbar-icon ri-settings-3-line me-1"></i>Settings</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0)"><i class="tf-icons navbar-icon ri-lock-2-line me-1"></i>Logout</a>
</li>
</ul>
</div>
</div>
</nav>
Create navbar with Info Color scheme by using .navbar-dark
& .bg-info
classes along with .navbar
.
<nav class="navbar navbar-expand-lg navbar-dark bg-info">
<div class="container-fluid">
<a class="navbar-brand" href="javascript:void(0)">Primary</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-ex-7">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar-ex-7">
<div class="navbar-nav me-auto">
<a class="nav-item nav-link active" href="javascript:void(0)">Home</a>
<a class="nav-item nav-link" href="javascript:void(0)">About</a>
<a class="nav-item nav-link" href="javascript:void(0)">Contact</a>
<a class="nav-item nav-link disabled" href="javascript:void(0)">Disabled</a>
</div>
<ul class="navbar-nav ms-lg-auto">
<li class="nav-item">
<a class="nav-link" href="javascript:void(0)"><i class="tf-icons navbar-icon ri-user-3-line me-1"></i>Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0)"><i class="tf-icons navbar-icon ri-settings-3-line me-1"></i>Settings</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0)"><i class="tf-icons navbar-icon ri-lock-2-line me-1"></i>Logout</a>
</li>
</ul>
</div>
</div>
</nav>
Create navbar with Dark Color scheme by using .navbar-dark
& .bg-dark
classes along with .navbar
.
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="javascript:void(0)">Primary</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-ex-7">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar-ex-7">
<div class="navbar-nav me-auto">
<a class="nav-item nav-link active" href="javascript:void(0)">Home</a>
<a class="nav-item nav-link" href="javascript:void(0)">About</a>
<a class="nav-item nav-link" href="javascript:void(0)">Contact</a>
<a class="nav-item nav-link disabled" href="javascript:void(0)">Disabled</a>
</div>
<ul class="navbar-nav ms-lg-auto">
<li class="nav-item">
<a class="nav-link" href="javascript:void(0)"><i class="tf-icons navbar-icon ri-user-3-line me-1"></i>Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0)"><i class="tf-icons navbar-icon ri-settings-3-line me-1"></i>Settings</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0)"><i class="tf-icons navbar-icon ri-lock-2-line me-1"></i>Logout</a>
</li>
</ul>
</div>
</div>
</nav>
Create navbar with White Color scheme by using .navbar-light
& .bg-white
classes along with .navbar
.
<nav class="navbar navbar-expand-lg navbar-light bg-white">
<div class="container-fluid">
<a class="navbar-brand" href="javascript:void(0)">Primary</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-ex-7">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar-ex-7">
<div class="navbar-nav me-auto">
<a class="nav-item nav-link active" href="javascript:void(0)">Home</a>
<a class="nav-item nav-link" href="javascript:void(0)">About</a>
<a class="nav-item nav-link" href="javascript:void(0)">Contact</a>
<a class="nav-item nav-link disabled" href="javascript:void(0)">Disabled</a>
</div>
<ul class="navbar-nav ms-lg-auto">
<li class="nav-item">
<a class="nav-link" href="javascript:void(0)"><i class="tf-icons navbar-icon ri-user-3-line me-1"></i>Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0)"><i class="tf-icons navbar-icon ri-settings-3-line me-1"></i>Settings</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0)"><i class="tf-icons navbar-icon ri-lock-2-line me-1"></i>Logout</a>
</li>
</ul>
</div>
</div>
</nav>
Here's an example of basic responsive navbar theme .bg-navbar-theme
that have theme navbar bg
color
and automatically collapses at the large breakpoint.
<nav class="navbar navbar-expand-xl bg-navbar-theme">
<div class="container-fluid">
<a class="navbar-brand" href="javascript:void(0)">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-ex-1">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar-ex-1">
<ul class="navbar-nav me-auto">
<li class="nav-item active">
<a class="nav-link" href="javascript:void(0)">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0)">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="javascript:void(0)" data-bs-toggle="dropdown">Dropdown link</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0)">Action</a>
<a class="dropdown-item" href="javascript:void(0)">Another action</a>
<a class="dropdown-item" href="javascript:void(0)">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="javascript:void(0)">Disabled</a>
</li>
</ul>
<form class="d-flex my-2 my-lg-0" action="javascript:void(0)">
<input class="form-control form-control-sm me-sm-2" type="text" placeholder="Search" />
<button class="btn btn-outline-primary my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</div>
</nav>
Here is the theme navbar bg color mixin which allow you to easily customize navbar style by adding your own class and colors.
@mixin template-navbar-style($parent, $bg, $color: null, $active-color: null, $border: null)
@include template-navbar-style('.my-bg-navbar-theme', #fff, $color: $text-muted, $active-color: $body-color);