navbars

Documentation and examples for Butter Cake's powerful, responsive navigation header, the navbar. Includes support for branding, navigation, and more.

How it works

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 color scheme classes.
  • 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 our Collapse JavaScript 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.

.container-fluid navbar - expanded above .expand-md - 790px

Remove .default-nav and .bg- to remove default style from the Navbar.

.bg-primary Navbar

<!-- NAVBAR -->
<nav class="navbar expand-md default-nav bg-primary">
    <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><a href="#!">link 1</a></li>
                <li><a href="#!">link 2</a></li>
            </ul>
        </div>

        <!-- TOGGLER | MOBILE -->
        <button class="toggler bg-secondary text-white" data-nav="#mainNav1"><i class="fa fa-bars"></i></button>

        
        

    </div>
</nav>

.container navbar - expanded above .expand-lg - 1160px,
Add .mx-auto on .menu to center navbar.

.bg-secondary Navbar

<!-- NAVBAR -->
    <nav class="navbar expand-lg default-nav bg-secondary">
        <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><a href="#!">link 1</a></li>
                    <li><a href="#!">link 2</a></li>
                    <li><a href="#!">link 3</a></li>
                    <li><a href="#!">link 4</a></li>
                    <li><a href="#!">link 5</a></li>
                </ul>
            </div>

            <!-- TOGGLER | MOBILE -->
            <button class="toggler bg-secondary text-white" data-nav="#mainNav2"><i class="fa fa-bars"></i></button>

            
            

        </div>
    </nav>

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">
                    <li><a href="#!">link 1</a></li>
                    <li><a href="#!">link 2</a></li>
                    <li><a href="#!">link 3</a></li>
                </ul>
            </div>

            <!-- TOGGLER | MOBILE -->
            <button class="toggler bg-secondary text-white" data-nav="#mainNavExpand"><i class="fa fa-bars"></i></button>

            
            

        </div>
    </nav>

.container navbar - expanded above .expand-sm - 590px

.bg-success logo on right

<!-- NAVBAR -->
<nav class="navbar expand-sm default-nav bg-success">
    <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><a href="#!">link 1</a></li>
                <li><a href="#!">link 2</a></li>
            </ul>
        </div>


        <!-- LOGO -->
        <div class="brand pr-0">
            <a href="#!">Logo</a>
        </div>



        
        

    </div>
</nav>

Checkout Navbar Examples