Introduction:

Discover our free nav bar, with responsive web design, using bootstrap and jquery. Our nav bar menu is composed by two bare navigation. You find with the first bare navigation a search box, and drop down menu that you can use it for example in the display of notification, user manager, and messages received by the system. Then, with the second bare of navigation, you will find a responsiv menu with nested submenu, which offers an ergonomic and modern navigation experience. Test a demo version on webi4u.com, and download the full version on our github account.

Plant of the guide

At the end of this course, you will be able to:

Prerequisites: (5)

Before starting this guide, you must already have the following skills:

Part 1: How you use our nav bar one?

The first nav bar, compsed by the acronym of your site, search box, and drop down menu

            
<header class="row">
    <div class="col-lg">
        <!-- nav bar one -->
        <nav class="container-fluid nav_one">
            <div class="row justify-content-between">
                <div>
                    <!-- sigle image -->
                    <img src="img/triangle-letter-ag-free-logo-design_8035-1.jpg" class="sigle"/>
                    
                    <!-- search box -->
                    <div class="search_box">
                        
                    </div>
                </div>
                <!-- drop down menu layout -->
                <div class="drop_down_menu">
                    
                </div>
            </div>
        </nav>
    </div>
</header>
Part 2: How you use our nav bar two?

With the second, navbar, you find the main navigation menu.

<header class="row">
    <div class="col-lg">
        <!-- nav bar two -->
        <nav class="container-fluid nav_two">
            <div class="row justify-content-center">
                <!-- nav bar item -->
                <div class="nav_bar_item">
                </div>
            </div>
        </nav>
    </div>
</header>
Part 3: How add, delete, update drop down menu?

The drop down menu of our template are simple nested div tags, each drop down item you find a label, and a status, you can change them to your needs.

<!-- drop dow menu -->
<div class="drop_down_menu">
    <div class="item">
        <div>
            <!-- drop down image -->
            <img src="img/flag_icon-icons.com_69377.png" class="icon"/>
            <div class="drop_down">
                <div class="drop_down_item">
                    <div class="row justify-content-between">
                        <!-- drop down label -->
                        <div class="label">
                            <a href="">
                                New user added: Jane Smith
                            </a>
                        </div>
                        <!-- drop down status -->
                        <div class="status">
                            news
                        </div>
                    </div>   
                </div>
            </div>
        </div>
    </div>
</div>