Header

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 &amp; 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>