Header Code - HTML Snippet of Default Website Header

Link: https://support.brilliantdirectories.com/support/solutions/articles/12000096170-header-code-html-snippet-of-default-website-header

This is sample HTML code of the default Website Header, including common classes and elements.


<!-- Header container starts -->
<div class="header">

<!-- Main container starts -->
<div class="container">

<!-- Row starts -->
<div class="row vmargin">

<!-- Website logo section starts -->
<div class="col-md-5 tpad xs-nopad xs-hpad sm-text-center xs-bmargin header-left-container">
<!-- Logo with title and slogan -->
<a class="logo vpad xs-nomargin xs-nopad" title="My New Website" href="/">
<i class="fa fa-user-circle pull-left hidden-sm hidden-xs bmargin"></i> <!-- Icon for the website -->
<span class="logo_title">My New Website</span> <!-- Website title -->
<span class="tpad slogan">The #1 Website To Find Members Anywhere</span> <!-- Website slogan -->
</a>
<!-- Clearfix to clear the float values -->
<div class="clearfix"></div>
</div>
<!-- Website logo section ends -->

<!-- Header right section starts -->
<div class="col-md-7 text-right sm-text-center header-right-container nolpad xs-hpad">

<!-- Mini navigation starts -->
<ul class="mini-nav nobmargin list-inline xs-nopad xs-tmargin vpad">
<li class="bmargin xs-nomargin"><span class="bmargin"> (800) 555-5555</span></li>
<li class="bmargin xs-nomargin"><a href="/about/contact" class="hpad bmargin">Contact Us</a></li>
<li class="bmargin xs-nomargin"><a href="/login" class="rpad bmargin">Member Login</a></li>
<li class="bmargin norpad xs-nopad xs-vmargin"><a href="/join" class="btn btn_get_listed bold">Members - Get Listed Today</a></li>
</ul>
<!-- Mini navigation ends -->

<!-- Clearfix to clear the float values -->
<div class="clearfix"></div>

<!-- Search form starts -->
<form action="/search_results" name="frm1" class="form-inline website-search">
<!-- Search by name or keyword input group -->
<div class="input-group input-group-sm bmargin sm-autosuggest">
<span class="input-group-addon hidden-md"><i class="fa fa-search"></i></span>
<span class="input-group-sm input_wrapper"><input type="text" placeholder="Name or Keyword" value="" name="q" class="member_search form-control input-sm" autocomplete="off"></span>
</div>

<!-- Search by city or postcode input group -->
<div class="input-group input-group-sm bmargin">
<span class="input-group-addon hidden-md"><i class="fa fa-location-arrow"></i></span>
<span class="input-group-sm input_wrapper"><input type="text" placeholder="City or Post Code" value="" name="location_value" class="googleSuggest googleLocation form-control"></span>
</div>

<!-- Search button -->
<input type="submit" value="Search" class="btn btn-sm btn_search bmargin xs-btn-block bold">
</form>
<!-- Search form ends -->

</div>
<!-- Header right section ends -->

</div>
<!-- Row ends -->

</div>
<!-- Main container ends -->

<!-- Mobile menu container starts -->
<div class="mobile-main-menu">
<ul class="sidebar-nav">
<li class="hasChildren"><a href="/home">Home</a><div class="clearfix"></div></li>
<li class="hasChildren"><a href="/search_results">Member Directory</a><div class="clearfix"></div></li>
<li class="hasChildren"><a href="/about">How It Works</a><div class="clearfix"></div></li>
<li class="hasChildren"><a href="/blog">Latest News</a><div class="clearfix"></div></li>
<li class="hasChildren"><a href="/join">Join Today</a><div class="clearfix"></div></li>
</ul>
</div>
<!-- Mobile menu container ends -->

<!-- Main navigation starts -->
<nav class="navbar navbar-default ">
<div class="container container-fluid">

<!-- Navbar header starts -->
<div class="navbar-header">
<!-- Mobile menu toggle button -->
<button type="button" class="navbar-toggle collapsed main_menu" data-toggle="collapse" aria-label="main_menu">
<i class="fa fa-bars fa-fw"></i>
</button>
</div>
<!-- Navbar header ends -->

<!-- Tablet menu starts -->
<div class="tablet-menu collapse navbar-collapse nopad" id="bs-main_menu">
<ul class="tablet-menu-ul nav navbar-nav nav-justified">
<li class=""><a href="/home">Home</a></li>
<li class=""><a href="/search_results">Member Directory</a></li>
<li class=""><a href="/about">How It Works</a></li>
<li class=""><a href="/blog">Latest News</a></li>
<li class=""><a href="/join">Join Today</a></li>
</ul>
</div>
<!-- Tablet menu ends -->

</div>
</nav>
<!-- Main navigation ends -->

</div>
<!-- Header container ends -->