1. Home
  2. Mutiny
  3. Html Structure
  4. Header Structure

Header Structure

Header Contains Logo, Navigation Menu, Cart And search.There is literally two logos in the header.One appears when page is scrolled down and another is normal.

Header Id is topnav. Shopping Cart is contained by the class : menu-extras. And Navigation id is navigation.

So below is the Basic but essential structure Involved in header formation.

 

    <header id="topnav">
      <div class="container">
        <!-- Logo container-->
        <div class="logo">
          <a href="index.html">
            <img src="images/logo_main.png" alt="" class="logo-light">
            <img src="images/logo_scroll.png" alt="" class="logo-dark">
          </a>
        </div>
        <!-- End Logo container-->
        <div class="menu-extras">
          <div class="menu-item">
            <!-- Shopping cart-->
            <div class="cart">
              <a href="#">
                <i class="ti-bag"></i><span class="cart-number">2</span>
              </a>
              <div class="shopping-cart">
                // Shopping Cart Info and products
              </div>
            </div>
            <!-- End shopping cart-->
          </div>
          <div class="menu-item">
            <!-- Search Form-->
            <div class="search">
              <a href="#">
                <i class="ti-search"></i>
              </a>
              <div class="search-form">
                <form action="#" class="inline-form">
                  <div class="input-group">
                    <input type="text" placeholder="Search" class="form-control"><span class="input-group-btn"><button type="button" class="btn btn-color"><span><i class="ti-search"></i></span>
                    </button>
                    </span>
                  </div>
                </form>
              </div>
            </div>
            <!-- End search form-->
          </div>
          <div class="menu-item">
            <!-- Mobile menu toggle-->
            <a class="navbar-toggle">
              <div class="lines">
                <span></span>
                <span></span>
                <span></span>
              </div>
            </a>
            <!-- End mobile menu toggle-->
          </div>
        </div>
        <div id="navigation">
          <!-- Navigation Menu-->
          <ul class="navigation-menu">
            <li class="has-submenu">
              <a href="#">Home</a>
              <ul class="submenu megamenu">
                <li>
                  <ul>
                    <li>
                      // Menu Goes here
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
          <!-- End navigation menu        -->
        </div>
      </div>
    </header>
Was this article helpful to you? Yes No

How can we help?