Headers

Header variant #1

HTML Website Templates use RD Navbar extension to implement site navigation functionality. Basic HTML code structure for this extension looks as follows:

  <nav class="rd-navbar rd-navbar-default" data-layout="rd-navbar-fixed" data-sm-layout="rd-navbar-fixed" data-md-layout="rd-navbar-fullwidth" data-md-device-layout="rd-navbar-fixed" data-lg-layout="rd-navbar-static" data-lg-device-layout="rd-navbar-static" data-md-stick-up-offset="80px" data-lg-stick-up-offset="46px">     <div class="rd-navbar-collapse-toggle" data-rd-navbar-toggle=".rd-navbar-collapse"><span></span></div>     <div class="rd-navbar-top-panel rd-navbar-collapse">       <div class="rd-navbar-top-panel-inner">         <address class="contact-info">           <ul class="group-lg">             <li>               <div class="unit unit-middle unit-horizontal unit-spacing-xs unit-xs-top">                 <div class="unit__left"><span class="icon text-middle fa-phone"></span></div>                 <div class="unit__body">                   <div class="p"><a class="text-middle" href="callto:#">1-800-1234-567</a></div>                 </div>               </div>             </li>             <li>               <div class="unit unit-middle unit-horizontal unit-spacing-xs unit-xs-top">                 <div class="unit__left"><span class="icon text-middle fa-envelope"></span></div>                 <div class="unit__body">                   <div class="p"><a class="text-middle" href="mailto:#">info@demolink.org</a></div>                 </div>               </div>             </li>             <li>               <div class="unit unit-middle unit-horizontal unit-spacing-xs unit-xs-top">                 <div class="unit__left"><span class="icon text-middle fa-map-marker"></span></div>                 <div class="unit__body">                   <div class="p"><a class="text-middle" href="contacts.html">2130 Fulton Street San Diego, CA 94117-1080 USA</a></div>                 </div>               </div>             </li>           </ul>         </address>       </div>     </div>     <div class="rd-navbar-inner">       <!-- RD Navbar Panel-->       <div class="rd-navbar-panel">         <!-- RD Navbar Toggle-->         <button class="rd-navbar-toggle" data-rd-navbar-toggle=".rd-navbar-nav-wrap"><span></span></button>         <!-- RD Navbar Brand-->         <div class="rd-navbar-brand"><a class="brand-name" href="index.html"><img src="images/brand.png" width="180" height="29" alt=""></a></div>       </div>       <div class="rd-navbar-aside-right">         <div class="rd-navbar-nav-wrap">           <!-- RD Navbar Nav-->           <ul class="rd-navbar-nav">             <li class="active"><a href="./">Home</a></li>             <li><a href="about.html">About</a>               <!-- RD Navbar Dropdown-->               <ul class="rd-navbar-dropdown">                ...               </ul>             </li>             <li><a href=".html">Link</a>               <!-- RD Navbar Megamenu-->               <ul class="rd-navbar-megamenu">                ...               </ul>             </li>           </ul>         </div>         <!--RD Navbar Search-->         <div class="rd-navbar-search"><a class="rd-navbar-search-toggle" data-rd-navbar-toggle=".rd-navbar-search" href="#"><span></span></a>           <form class="rd-search" action="search-results.html" data-search-live="rd-search-results-live" method="GET">             <div class="form-wrap">               <label class="form-label form-label" for="rd-navbar-search-form-input">Type and hit enter...</label>               <input class="rd-navbar-search-form-input form-input" id="rd-navbar-search-form-input" type="text" name="s" autocomplete="off">               <div class="rd-search-results-live" id="rd-search-results-live"></div>             </div>             <button class="rd-search-form-submit fa-search"></button>           </form>         </div>       </div>     </div>   </nav>

Header variant #2

Header variant #3

Header variant #4

Header variant #5

Header variant #6