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:#">[email protected]</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