Choose a header style from our headers page. You can also create your own style. You need to create a mobile menu by yourself using default header as an example.
You can set the header with help of header tag of html5. Within the header tag you need to create .row class. Within this .row class, you need to create .col class as per your requirement.
<header> <!-- header rows go here --> </header>
<header> <div class="header-top header-banner"> <!-- header rows go here --> <div class="container"> <div class="row"> </div> </div> </div> <div class="header-white"> <div class="container"> <div class="row header-data"> </div> </div> </div> </header>
The below code explains how to add elements to the rows.
<header> <div class="header-top header-banner"> <div class="container"> <div class="row"> <div class="topinfo pull-right"> <div class="col-md-6"> <i class="fa fa-phone fa-xicons-blue"></i>+1 234-567-890 </div> <div class="col-md-6"> <i class="fa fa-phone fa-xicons-blue"></i> <a href="mailto:mail@envato.com">mailto:mail@envato.com</a> </div> </div> </div> </div> </div> <div class="header-white"> <div class="container"> <div class="row header-data"> <div class="col-md-2 col-xs-2 logo"> <a href="index.html"><img src="images/logo.png"/></a> </div> <div class="col-md-8 pull-right"> <section class="top-bar-section"> <ul id="menu-main-menu-1"> <li class="has-dropdown"><a href="index.html">Home</a></li> <li class="has-children has-dropdown"> <a href="#">Fetures</a> <ul class="dropdonn"> <li class="has-children has-dropdown"><a href="#">Header</a> <ul class="dropdown"> <li><a href="#">Header Dark</a></li> <li><a href="#">Header light</a></li> </ul> </li> <li class="has-children has-dropdown"><a href="#">Footer</a> <ul class="dropdown"> <li><a href="#">Footer Dark</a></li> <li><a href="#">Footer light</a></li> </ul> </li> <li><a href="#">Utility Grid</a></li> <li><a href="#">Animation</a></li> </ul> </li> <li class="megamenu has-children has-dropdown"> <a href="#"><span>Templates</span><i class="fa fa-angle-down fa-2x-after"></i></a> <ul class="dropdown fullwidhtdropdown"> <!-- Full Width li start --> <li class="fullwidth"> <ul> <li><a href="#"><i class="fa fa-angle-down fa-2x-after"></i><span>About 1</span></a></li> <li><a href="#"><i class="fa fa-angle-down fa-2x-after"></i><span>About 2</span></a></li> <li><a href="#"><i class="fa fa-angle-down fa-2x-after"></i><span>About 3</span></a></li> <li><a href="#"><i class="fa fa-angle-down fa-2x-after"></i><span>Service 1</span></a></li> <li><a href="#"><i class="fa fa-angle-down fa-2x-after"></i><span>Service 2</span></a></li> <li><a href="#"><i class="fa fa-angle-down fa-2x-after"></i><span>Service 3</span></a></li> <li><a href="#"><i class="fa fa-angle-down fa-2x-after"></i><span>Service 4</span></a></li> <li><a href="#"><i class="fa fa-angle-down fa-2x-after"></i><span>Service 5</span></a></li> </ul> <!-- User can Repeat the ul tag --> </li> <!-- Full Width li over --> </ul> </li> <li> <a href="#"><span>Element</span><i class="fa fa-angle-down fa-2x-after"></i></a> <ul class="dropdown fullwidhtdropdown"> <li><a href="#"><i class="fa fa-angle-down fa-2x-after"></i><span>About 1</span></a></li> <li><a href="#"><i class="fa fa-angle-down fa-2x-after"></i><span>About 2</span></a></li> <li><a href="#"><i class="fa fa-angle-down fa-2x-after"></i><span>About 3</span></a></li> <li><a href="#"><i class="fa fa-angle-down fa-2x-after"></i><span>Service 1</span></a></li> <li><a href="#"><i class="fa fa-angle-down fa-2x-after"></i><span>Service 2</span></a></li> <li><a href="#"><i class="fa fa-angle-down fa-2x-after"></i><span>Service 3</span></a></li> <li><a href="#"><i class="fa fa-angle-down fa-2x-after"></i><span>Service 4</span></a></li> <li><a href="#"><i class="fa fa-angle-down fa-2x-after"></i><span>Service 5</span></a></li> </ul> </li> <li> <a href="#"><span>Doc</span><i class="fa fa-angle-down fa-2x-after"></i></a> <ul class="dropdown"> <li><a href="#">Doc Map</a></li> <li><a href="#">Quick Start Guide Grid</a></li> <li><a href="#">Theme Structure</a></li> </ul> </li> </ul> </section> </div> </div> </div> </div> </header>
Wrap the row that needs to be always on top into a block with the help of .fixed-header class.
<header> <div class="header-top header-banner"> <!-- header rows go here --> <div class="container"> <div class="row"> </div> </div> </div> <div class="header-white fixed-header"> <div class="container"> <div class="row header-data"> <!-- This row is inside "fixed-header" so it will be fixed on top --> </div> </div> </div> </header>