Introduction:

Download free bootstrap nav bar menu with webdesign responsiv, using jquery and html, css. Our template is compsé by two bare of the navigation. First is an acronym for your website, a search bar, and menu list with drop down menu. The second nav bar is the main nav bar, it is composed of nav bar item and sub nav bar item, and for each item is contiet an icon and an item label. 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: Add, delete, update drop down item?

The navigation bar of our index page is very simple, it is composed by div and bind whose display is inline block

            
<header class="row">
    <div class="col-lg">
        <nav class="container-fluid nav_one">
            <div class="nav_bar">
                <!-- nav bar item -->
                 <div class="nav_bar_item">
                     <div>
                         <div class="click">
                             <!-- nav bar icon -->
                             <img src="img/notification_icon.png" class="icon"/>
                             <!-- drop down menu -->
                             <div class="drop_down">
                                 <!-- drop down header -->
                                 <header class="container-fluid">
                                 </header>
                                 <!-- drop down content -->
                                 <section class="container-fluid">
                                 </section>
                             </div>
                         </div>
                     </div>
                 </div>
            </div>
        </nav>
    </div>
</header>
Part 2: How add, update, delete nav bar item?

In addition to the drop down menu, you also find a bare-bones navigation for a good browsing experience on your website. For each nav bar, you will see a sub nav bar menu, each sub bar menu item contains an icon and a label.

<header class="row">
    <div class="col-lg">
        <nav class="container-fluid nav_two">
            <div class="row">
                <div class="nav_item" style="background-color: white">
                    <div>
                        <strong class="label">
                            DASHBORD
                        </strong>
                        <div class="sub_menu">
                            <div class="sub_menu_item">
                                <img src="img/dashboard.png" class="icon"/>
                                <strong>
                                    Dashbord
                                </strong>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </nav>
    </div>
</header>