Navbar
Create a navigation bar that can be used for your main site navigation.
How it works
Documentation and examples for Butter Cake's powerful, responsive navigation header, the navbar. Includes support for branding, navigation, and more.
Here’s what you need to know before getting started with the navbar.
- Navbars require a wrapping
.navbar
with.expand{-sm|-md|-lg|-xl}
for responsive collapsing and come's with White and Primary Color Navbar. - Navbars and their contents are fluid by default. can use
.container or .container-fluid
- Navbars are responsive by default, but you can easily modify them to change that. Responsive behavior depends on ButterCake.js plugin.
- Ensure accessibility by using a
<nav>
element or, if using a more generic element such as a<div>
, add arole="navigation"
to every navbar to explicitly identify it as a landmark region for users of assistive technologies.
Basic Navbar
.container-fluid
navbar - expanded above .expand-md
- 790px
Remove .default-nav
to remove default style from the Navbar so you can write your own css
White background by Default if you don't have a color utility class on .navbar
Butter Cake Navbar works perfectly with Bootstrap Nav-walker For Wordpress.
<!-- DEFAULT WHITE NAVBAR -->
<nav class="navbar expand-md default-nav">
<div class="container-fluid">
<!-- LOGO -->
<div class="brand">
<a href="#!">Logo</a>
</div>
<!-- NAVBAR -->
<div class="menu-box" id="mainNav1">
<!-- CLOSE BUTTON | MOBILE-->
<div class="menu-close">
<i class="fa fa-close"></i>
</div>
<!-- MENU -->
<ul class="menu ml-auto">
<li class="nav-item active"><a href="" class="nav-link">Home</a></li>
<li class="nav-item"><a href="" class="nav-link">Portfolio</a></li>
<li class="nav-item"><a href="" class="nav-link">About</a></li>
<li class="nav-item"><a href="" class="nav-link">Contact</a></li>
</ul>
</div>
<!-- TOGGLER | MOBILE -->
<button class="toggler bg-primary" data-nav="#mainNav1"><i class="fa fa-bars"></i></button>
</div>
</nav>
Navbar Alignment
.container navbar - expanded above .expand-lg - 1160px
Add .mx-auto | .ml-auto | .mr-auto class
on .menu
to align menu on Navbar.
<!-- NAVBAR -->
<nav class="navbar expand-lg default-nav bg-primary">
<div class="container">
<!-- LOGO -->
<div class="brand">
<a href="#!">Logo</a>
</div>
<!-- NAVBAR -->
<div class="menu-box" id="mainNav2">
<!-- CLOSE BUTTON | MOBILE-->
<div class="menu-close">
<i class="fa fa-close"></i>
</div>
<!-- MENU -->
<ul class="menu mx-auto">
<li class="nav-item active"><a href="" class="nav-link">Home</a></li>
<li class="nav-item"><a href="" class="nav-link">Portfolio</a></li>
<li class="nav-item"><a href="" class="nav-link">About</a></li>
<li class="nav-item"><a href="" class="nav-link">Contact</a></li>
</ul>
</div>
<!-- TOGGLER | MOBILE -->
<button class="toggler bg-secondary" data-nav="#mainNav2"><i class="fa fa-bars"></i></button>
</div>
</nav>
Navbar Expanded
Add .expanded
class to .navbar
<!-- NAVBAR -->
<nav class="navbar expanded default-nav bg-primary">
<div class="container">
<!-- LOGO -->
<div class="brand">
<a href="#!">Logo</a>
</div>
<!-- NAVBAR -->
<div class="menu-box" id="mainNavExpand">
<!-- CLOSE BUTTON | MOBILE-->
<div class="menu-close">
<i class="fa fa-close"></i>
</div>
<!-- MENU -->
<ul class="menu ml-auto">
<li class="nav-item active"><a href="" class="nav-link">Home</a></li>
<li class="nav-item"><a href="" class="nav-link">About</a></li>
</ul>
</div>
<!-- TOGGLER | MOBILE -->
<button class="toggler bg-secondary" data-nav="#mainNavExpand"><i class="fa fa-bars"></i></button>
</div>
</nav>
Navbar Logo Right
.container
navbar - expanded above .expand-sm - 590px
<!-- NAVBAR -->
<nav class="navbar expand-sm default-nav bg-primary">
<div class="container">
<!-- TOGGLER | MOBILE -->
<button class="toggler bg-gray text-white mr-auto ml-0" data-nav="#mainNav3"><i
class="fa fa-bars"></i></button>
<!-- NAVBAR -->
<div class="menu-box" id="mainNav3">
<!-- CLOSE BUTTON | MOBILE-->
<div class="menu-close">
<i class="fa fa-close"></i>
</div>
<!-- MENU -->
<ul class="menu">
<li class="nav-item active"><a href="" class="nav-link">Home</a></li>
<li class="nav-item"><a href="" class="nav-link">About</a></li>
</ul>
</div>
<!-- LOGO -->
<div class="brand pr-0">
<a href="#!">Logo</a>
</div>
</div>
</nav>
For More examples checkout Preview page Preview