Unlimited Websites Cpanel Hosting Only $0.99 per month - Click here

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 a role="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

We hope you have enjoyed using Butter Cake and if you feel like it has helped you out and want to support the team you can help us by donating or backing us on Patreon. Any amount would help support and continue development on this project and is greatly appreciated.

Patreon