23 Bootstrap header layouts: make header menu easily
The header layouts using Bootstrap framework
In this post, I am going to share an excellent plug-in that works with Bootstrap for creating the header menu for your website. It includes 23 free templates that you may choose as per the need of your web project.
The free code is included by the developer that you may get from the demo pages below (a few) or by visiting the plug-in page in Github website (see the credit below).
The free layouts include the code for navbar right menu, center and left. Besides, if you have a shopping related site, a menu is there for you to show basket items. It also includes the mega menu template, navbar with search, sticky navbar, and many others. See the section below for the live demos of a few menus.
The following layout for the header menu contains navigation links to the right side. A dropdown menu is also added with three levels. The animation effect is used for the dropdown menu with fadeInDown and fadeOutUp values. You may set these values in the data attributes as shown in the live demo below:
See online demo and code
Following is the markup for this header menu:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 |
<nav class="navbar navbar-default bootsnav"> <div class="container"> <!-- Start Header Navigation --> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-menu"> <i class="fa fa-bars"></i> </button> <a class="navbar-brand" href="#brand"><img src="images/brand/logo-black.png" class="logo" alt=""></a> </div> <!-- End Header Navigation --> <div class="collapse navbar-collapse" id="navbar-menu"> <ul class="nav navbar-nav navbar-right" data-in="fadeInDown" data-out="fadeOutUp"> <li><a href="https://www.jquery-az.com/">Home</a></li> <li><a href="https://www.jquery-az.com/about-us/">About</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" >Tutorials</a> <ul class="dropdown-menu"> <li><a href="#">jQuery</a></li> <li><a href="#">jQuery UI</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" >Bootstrap</a> <ul class="dropdown-menu"> <li><a href="#">Forms</a></li> <li><a href="#">Carousel</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" >Carousel Types</a> <ul class="dropdown-menu"> <li><a href="#">Multi-item</a></li> <li><a href="#">Product Carousel</a></li> </ul> </li> <li><a href="#">Tables</a></li> </ul> </li> <li><a href="#">JavaScript</a></li> </ul> </li> <li><a href="https://www.jquery-az.com/contact/">Contact</a></li> </ul> </div><!-- /.navbar-collapse --> </div> </nav> <!-- End Navigation --> <div class="clearfix"></div> <div class="container"> <div class="jumbotron"> <h1>The header menu layout demo</h1> <p>Place carousel, slider, other static images or textual content here</p> </div> </div> |
If you want to use the same menu as above with left navigation then this is just the matter of changing a class in the main div. For that, find the div with navbar-menu ID and change the navbar-right to navbar-left in the <ul> tag:
|
1 2 3 |
<div class="collapse navbar-collapse" id="navbar-menu"> <ul class="nav navbar-nav navbar-left" data-in="fadeInDown" data-out="fadeOutUp"> |
See the demo online:
See online demo and code
If you have a shopping related website, you may show the shopping cart items on the right corner of header menu. As the mouse is hovered over the cart icon, the items in the cart will display in the header menu. See the online demonstration:
See online demo and code
The markup:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 |
<nav class="navbar navbar-default bootsnav"> <div class="container"> <!-- Start Atribute Navigation --> <div class="attr-nav"> <ul> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" > <i class="fa fa-shopping-bag"></i> <span class="badge">3</span> </a> <ul class="dropdown-menu cart-list"> <li> <a href="#" class="photo"><img src="images/thumb/thumb01.jpg" class="cart-thumb" alt="" /></a> <h6><a href="#">Selected Book 1 </a></h6> <p>2x - <span class="price">$10.99</span></p> </li> <li> <a href="#" class="photo"><img src="images/thumb/thumb01.jpg" class="cart-thumb" alt="" /></a> <h6><a href="#">Selected Book 2 </a></h6> <p>2x - <span class="price">$20.50</span></p> </li> -- More List -- <li class="total"> <span class="pull-right"><strong>Total</strong>: $0.00</span> <a href="#" class="btn btn-default btn-cart">Cart</a> </li> </ul> </li> </ul> </div> <!-- End Atribute Navigation --> <!-- Start Header Navigation --> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-menu"> <i class="fa fa-bars"></i> </button> <a class="navbar-brand" href="#brand"><img src="images/brand/logo-black.png" class="logo" alt=""></a> </div> <!-- End Header Navigation --> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="navbar-menu"> <ul class="nav navbar-nav navbar-left" data-in="fadeInDown" data-out="fadeOutUp"> <li><a href="https://www.jquery-az.com/">Home</a></li> <li><a href="https://www.jquery-az.com/about-us/">About</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" >Tutorials</a> <ul class="dropdown-menu"> <li><a href="#">jQuery</a></li> <li><a href="#">jQuery UI</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" >Bootstrap</a> <ul class="dropdown-menu"> <li><a href="#">Forms</a></li> <li><a href="#">Carousel</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" >Carousel Types</a> <ul class="dropdown-menu"> <li><a href="#">Multi-item</a></li> <li><a href="#">Product Carousel</a></li> </ul> </li> <li><a href="#">Tables</a></li> </ul> </li> <li><a href="#">JavaScript</a></li> </ul> </li> <li><a href="https://www.jquery-az.com/contact/">Contact</a></li> </ul> </div><!-- /.navbar-collapse --> </div> </nav> <!-- End Navigation --> <div class="clearfix"></div> <div class="container"> <div class="jumbotron"> <h1>The header menu layout demo</h1> <p>Place carousel, slider, other static images or textual content here</p> </div> </div> |
By using this plug-in, you may also create a mega menu. See the following demo where a mega menu is integrated into the above example’s menu adjacent to the dropdown.
See online demo and code
You may get the complete code from the demo page.
Setting up this header plug-in in your website
For setting up this plug-in, you need to download it from the Github website. After downloading the zipped file, extract the package and get a few dependent files:
In the <head> section:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<!-- Bootstrap Core CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> <!-- Font Icons --> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css" rel="stylesheet"> <!-- Font Style --> <!-- Animate --> <link href="css/animate.css" rel="stylesheet"> <!-- Bootsnav --> <link href="css/bootsnav/bootsnav.css" rel="stylesheet"> <link href="css/bootsnav/overwrite.css" rel="stylesheet"> <link href="css/bootsnav/skins/color.css" rel="stylesheet"> |
Above the </body> tag:
|
1 2 3 4 5 |
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> <script src="js/bootsnav/bootsnav.js"></script> |
The non-CDN files are included in the downloaded package.
You may also see 23 layouts linked from the source page.