Navbar

The navbar component is a responsive and versatile horizontal navigation bar with the following structure:

  • navbar-wrapper class is required at the starting of the header in the header tag for identifying the navbar columns.

    • two-column-nav divide the navbar into two columns where one half will have the brand logo and the other half will have the links, icons, etc.

    • navigation-center is used to make the links/nav/navigation appear at the center.

  • navigation-inner indicates the internal part of navigation where you can use container class to keep the menu in a container.

  • left-nav is used to keep the links/icons on the left side.

    • Note: it needs to be used with nav tag only else it will not work properly.

    • Keeping the complete inheritance of ul>li>a will keep the bootstrap rev navigation work seamless.

  • right-nav is used to keep the links/icons on the right side.

    • Note: there will be a nav tag use else it won't work as expected.

    • Keeping the total legacy of ul>li>a will keep the bootstrap rev up route work consistent.

  • logo is used to indicate the presence of the logo/brand in navigation.

    • background: url(../img/logo.png) update image name to show your logo.

      Note: The logo is used in the background to let navbar helper classes work better.

    • Logo can be used in img tags as well.

  • xs-nav is used to show the navbar on the mobile screen.

Navigation in mobile

You dont have to make any change in html or css to make it mobile responsive. All you need to do is copy the following js code and paste it in js file to make it working.

menu-trigger class is the triggered class.

visible class need to be add in xs-nav class to make navigation visible on mobile screens.

show class need to be add in menu-close class to make close triger visible on mobile screens. 

  $(".menu-trigger").click(function(){
    $("nav.xs-nav").addClass("visible");
    $(".menu-close").addClass("show");
  });
  $(".menu-close").click(function(){
    $("nav.xs-nav").removeClass("visible");
    $(".menu-close").removeClass("show");
  });

Centerlized Navigation

In this design, both the left-nav and the right-nav are used. It is done so to make it easy for the designers to navigate through the code. In case, the designers want the link to be viewed on the right side of the screen, then they can simply interchange the li>a items between the left-nav and the right-nav and vice versa. 

<header class="navigation-wrapper navigation-center">
<div class="container navigation-inner">
    <div class="logo" style="background: url(https://bootstraprev.com/img/logo.png)"></div>
    <nav class="left-nav xs-nav">
        <ul>
            <li>
                <a href="#">About Us</a>
            </li>
            <li>
                <a href="#">Project Tour</a>
            </li>
            <li>
                <a href="#">Make My Project</a>
            </li>
        </ul>
    </nav>
    <nav class="right-nav">
        <ul>
            <li>
                <a href="#"> <i class="bi bi-search"></i> </a>
            </li>
            <li>
                <a href="#"> <i class="bi bi-cart"></i> </a>
            </li>
        </ul>
    </nav>
    <div class="menu-trigger"> <i class="bi bi-list"></i> </div>
    <div class="menu-close"> <i class="bi bi-x"></i> </div>
</div>
</header>

Extended Navbar

The navbar of this design has two columns separated by a divider. Both have a right-nav to make the links/ buttons appear at the right. One can shift it to the left using left-nav instead of right. It is a navbar with a hamburger menu. menu-trigger is the class name. If the user is viewing the navbar through a mobile, they can see the hamburger menu in which the links under ul list visible.

Moving ahead, there is a menu-close as the class name to close the hamburger menu on the mobile screen. This navbar design template is fully responsive and customizable. 

<header class="navigation-wrapper two-column-nav">
<div class="container navigation-inner">
    <div class="logo" style="background: url(https://bootstraprev.com/img/logo.png)"></div>
    <nav class="right-nav">
        <ul>
            <li>
                <a href="#"> Sign In </a>
            </li>
            <li>
                <a href="#"> Register </a>
            </li>
            <li>
                <a href="#"> <i class="bi bi-search"></i> </a>
            </li>
            <li>
                <a href="#"> <i class="bi bi-cart"></i> </a>
            </li>
        </ul>
    </nav>
    <div class="menu-trigger"> <i class="bi bi-list"></i> </div>
    <div class="menu-close"> <i class="bi bi-x"></i> </div>
</div>
<div class="container navigation-inner below-navigation">
    <nav class="right-nav xs-nav">
        <ul>
            <li>
                <a href="#">About Us</a>
            </li>
            <li>
                <a href="#">Project Tour</a>
            </li>
            <li>
                <a href="#">Make My Project</a>
            </li>
            <li>
                <a href="#"> Sign In </a>
            </li>
            <li>
                <a href="#"> Register </a>
            </li>
        </ul>
    </nav>
</div>
</header>