Introduction:

Download our free nav bar menu responsiv, using html, css, jquery and bootstrap. You will find with our template a verix nav bar moder and ergonomic. The nav bar is compsé by three elements. First of all, you have a navigation bar, where each nav bar item is composed of a nested sub menu. Then you find a search box, and a social media link. The menu is responsiv with all the resolution, such as, mobile, pc and tablet. 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 layout?

The layout of our template, is used by the grid system of the bootstrap. With three main element, you will find a bare of navigation, a search box and social media links.

            
<body class="container-fluid">
    <header class="row">
        <div class="col-lg">
            <div class="container-fluid">
                <div class="row justify-content-between">
                    <!-- nav bar -->
                    <nav class="nav_bar">
                    </nav>
                    
                    <!-- search box -->
                    <div class="search_box">
                    </div>
                    
                    <!-- social media links -->
                    <div class="icons_nav">
                    </div>
                </div>
            </div>
        </div>
    </header>
</body>
Part 2: Add, delete, update nav bar item?

The nav bar part is compsed by nav bar items, of which each nav bar item is compsed either by a link, or by a sub menu.

<body class="container-fluid">
    <header class="row">
        <div class="col-lg">
            <div class="container-fluid">
                <div class="row justify-content-between">
                    <!-- nav bar -->
                    <nav class="nav_bar">
                        <!-- nav bar item -->
                        <div class="nav_bar_item">
                            <div>
                                <a href="">
                                    <div class="content">
                                        <!-- nav bar item label -->
                                        <em class="label">
                                            Contact
                                        </em>
                                    </div>
                                </a>    
                            </div>
                        </div>
                    </nav>
                </div>
            </div>
        </div>
    </header>
</body>