Introduction:

Download free, a nav bar, side bar, drop down menu, sidebar menu, with responsiv web design, using html, css, jquery and bootstrap. Our template is compsé by two bare of the main navigation. With the first nav bar, you will find an acronym image of your site, a search box, and a drop down menu. In continuation with the second nav bar you find a simple nav bar links, for a good experience of navigation on your site. 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: Use the nav bar one layout?

The first, nav bar is composed first of all by an image of the acronym of your site, in continuation a search box with icon, using bootstrap input group, in the end you find a menu of the drop dow.

            
<body class="container-fluid">
    <header class="row">
        <div class="col-lg">
            <!-- nav bar one -->
            <nav class="container-fluid nav_one">
                <div class="row justify-content-between">
                    <div class="item">
                        <!-- sigle image -->
                        <img src="" class="sigle"/>
                        
                        <!-- search box -->
                        <div class="search_box">
                        </div>
                    </div>
                    
                    <!-- links nav bar -->
                    <div class="item">
                    </div>
                </div>
            </nav>
        </div>
    </header>
</body>
Part 2: Add, delete, upadate drop down menu?

First you find an icon at the main header, for drop down menu display management, you can change this icon to your site needs. Then, the drop down menu is composed of items, each item of which is compsed by an icon and a label.

<body class="container-fluid">
    <header class="row">
        <div class="col-lg">
            <!-- nav bar one -->
            <nav class="container-fluid nav_one">
                <div class="row justify-content-between">
                    <!-- drop down menu layout -->
                    <div class="item">
                        <ul>
                            <li>
                                <div>
                                    <!-- drop down header icon -->
                                    <img src="img/menu_icon.png" class="icon"/>
                                    
                                    <!-- drop down layout -->
                                    <div class="drop_down_menu drop_down_icon">
                                        
                                        <!-- drop down item -->
                                        <div class="item">
                                            
                                            <!-- drop down item icon -->
                                            <img src="img/01.png" class="drop_down_icon"/>
                                            
                                            <!-- drop down item abel -->
                                            <strong class="label">
                                                Images
                                            </strong>
                                        </div>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>
        </div>
    </header>
</body>