Markup
<div id="header" class="z-index-5">
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="header-inner-wrap">
<a href="/" id="main-logo">
<i class="icon icon-aaa white">
<svg><use xlink:href="img/spritemap.svg#aaa-logo"></use><svg>
</i>
</a>
<a href="#" class="menu-button">
<span class="bar bar-top"></span>
<span class="bar bar-bottom"></span>
<span class="text">Menu</span>
</a>
<div class="nav-wrapper">
<div id="main-nav" class="nav">
<div class="search-field">
<form action="#">
<div class="form-block">
<label class="visuallyhidden" for="site-search">Search:</label>
<input id="site-search" type="search" placeholder="Search">
<button type="submit" class="button-link">
<svg><use xlink:href="img/spritemap.svg#icon-search"></use><svg>
</button>
</div>
</form>
</div>
<ul class="main-menu menu">
<li>
<a href="#">
<span class="menu-label main">Membership</span>
<span class="menu-label sub">benifits + discounts</span>
<i class="icon icon-arrow-circle">
<svg>
<use xlink:href="img/spritemap.svg#icon-arrow-circle"></use>
</svg>
</i>
</a>
<ul class="sub-menu col-lg col-3">
<li class="col col-intro">
<img src="http://placehold.it/300x200" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipi sicing elit. Fugiat doloribus repellat architecto.</p>
</li>
<li class="col">
<ul>
<li class="title-link">
<a href="#">
Sub Menu Item
<i class="icon icon-arrow">
<svg><use xlink:href="img/spritemap.svg#icon-arrow-right"></use><svg>
</i>
</a>
</li>
<li><a href="#">Sub Menu Item</a></li>
<li><a href="#">Sub Menu Item</a></li>
<li><a href="#">Sub Menu Item</a></li>
<li><a href="#">Sub Menu Item</a></li>
</ul>
</li>
<li class="col">
<ul>
<li><a href="#">Sub Menu Item</a></li>
<li><a href="#">Sub Menu Item</a></li>
<li><a href="#">Sub Menu Item</a></li>
<li><a href="#">Sub Menu Item</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">
<span class="menu-label main">Automotive</span>
<span class="menu-label sub">roadside + more</span>
<i class="icon icon-arrow-circle">
<svg>
<use xlink:href="img/spritemap.svg#icon-arrow-circle"></use>
</svg>
</i>
</a>
<ul class="sub-menu col-md col-2">
<li class="col col-intro">
<img src="http://placehold.it/300x200" alt="">
</li>
<li class="col">
<ul>
<li><a href="#">Sub Menu Item</a></li>
<li><a href="#">Sub Menu Item</a></li>
<li><a href="#">Sub Menu Item</a></li>
<li><a href="#">Sub Menu Item</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">
<span class="menu-label main">Insurance & Finance</span>
<span class="menu-label sub">protect + save</span>
<i class="icon icon-arrow-circle">
<svg>
<use xlink:href="img/spritemap.svg#icon-arrow-circle"></use>
</svg>
</i>
</a>
<ul class="sub-menu col-4">
<li class="col">
<ul>
<li><a href="#">Sub Menu Item</a></li>
<li><a href="#">Sub Menu Item</a></li>
<li><a href="#">Sub Menu Item</a></li>
<li><a href="#">Sub Menu Item</a></li>
</ul>
</li>
<li class="col">
<ul>
<li><a href="#">Sub Menu Item</a></li>
<li><a href="#">Sub Menu Item</a></li>
<li><a href="#">Sub Menu Item</a></li>
<li><a href="#">Sub Menu Item</a></li>
</ul>
</li>
<li class="col">
<ul>
<li><a href="#">Sub Menu Item</a></li>
<li><a href="#">Sub Menu Item</a></li>
<li><a href="#">Sub Menu Item</a></li>
<li><a href="#">Sub Menu Item</a></li>
</ul>
</li>
<li class="col">
<ul>
<li><a href="#">Sub Menu Item</a></li>
<li><a href="#">Sub Menu Item</a></li>
<li><a href="#">Sub Menu Item</a></li>
<li><a href="#">Sub Menu Item</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">
<span class="menu-label main">Travel</span>
<span class="menu-label sub">plan + book</span>
<i class="icon icon-arrow-circle">
<svg>
<use xlink:href="img/spritemap.svg#icon-arrow-circle"></use>
</svg>
</i>
</a>
<ul class="sub-menu col-md pull-right col-2">
<li class="col">
<ul>
<li><a href="#">Sub Menu Item</a></li>
<li><a href="#">Sub Menu Item</a></li>
<li><a href="#">Sub Menu Item</a></li>
<li><a href="#">Sub Menu Item</a></li>
</ul>
</li>
<li class="col">
<ul>
<li><a href="#">Sub Menu Item</a></li>
<li><a href="#">Sub Menu Item</a></li>
<li><a href="#">Sub Menu Item</a></li>
<li><a href="#">Sub Menu Item</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<div id="alt-nav" class="nav">
<ul class="alt-menu menu">
<li><a href="#">Request Assistance ></a></li>
<li><a href="#">Renew Membership ></a></li>
<li><a href="#">Schedule Service ></a></li>
<li><a href="#">Store Locator ></a></li>
</ul>
<ul class="member-menu menu">
<li>
<a href="#">
<i class="icon icon-cart">
<svg><use xlink:href="img/spritemap.svg#icon-cart"></use><svg>
</i>
Online Store
</a>
</li>
<li>
<a href="#">
<i class="icon icon-login">
<svg><use xlink:href="img/spritemap.svg#icon-login"></use><svg>
</i>
Login
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Do not implement this link -->
<a href="/inc/modules/?module=header" class="module-link">
<i class="icon info-icon">i</i>
<span class="tool-tip">Header</span>
</a>
<!-- Do not implement this link -->
</div>