There are no notes for this item.
<header class="primary sticky" style="top: 0px;">
<div class="search-drawer">
<div>
<div class="container">
<form action="">
<div class="text">
<label class="sr-only" for="">Search the website</label>
<input type="text">
</div>
<div class="submit">
<input type="submit">
</div>
</form>
</div>
</div>
</div>
<div class="container">
<div class="header-content">
<div class="branding">
<a href="https://github.com/imarc/boilerplate">
<img src="/img/logo-boilerplate.png" alt="Imarc Boilerplate">
</a>
</div>
<button aria-label="Toggle Menu" class="menu-toggle"><i class="fas fa-bars"></i></button>
<div class="desktop">
<div class="utilities">
<nav class="utility">
<ul>
<li><a aria-label="Search site" class="search-toggle" href="/search"><i aria-hidden="" class="fas fa-search"></i> Search</a></li>
<li><a href="">Careers</a></li>
<li><a href="">Legal</a></li>
<li><a href="">Log In</a></li>
</ul>
</nav>
</div>
<nav class="primary">
<ul>
<li class="mega">
<a href="">Maine <i class="fas fa-caret-down" aria-hidden=""></i></a>
<div class="dropdown">
<div class="menu">
<div>
<ul>
<li>
<a href="">Products</a>
</li>
<li>
<a href="">Services</a>
</li>
<li>
<a href="">Blog</a>
</li>
<li>
<a href="">About Us</a>
</li>
<li>
<a href="">Contact</a>
</li>
</ul>
</div>
<div>
<h3>Lorem Ipsum Dolar Amat</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis dignissimos quisquam numquam veniam eos reprehenderit, nemo sunt nihil rem suscipit.
</p>
<p>
Nemo sunt nihil rem lorem amat fuga consectetur adipisicing elit.
</p>
</div>
<div>
<img src="http://dummyimage.com/600x400/ff665b/ffffff.png&text=Just an image placeholder " alt="">
</div>
</div>
</div>
</li>
<li>
<a href="#yup">Markup <i class="fas fa-caret-down" aria-hidden=""></i></a>
<div class="dropdown">
<div class="menu">
<div>
<ul>
<li>
<a href="">Hello World</a>
</li>
<li>
<a href="">Lorem Ipsum Amat</a>
</li>
<li>
<a href="">HTML is on version 5</a>
</li>
</ul>
</div>
</div>
</div>
</li>
<li>
<a href="">New Hampshire</a>
</li>
<li>
<a href="">Vermont</a>
</li>
<li>
<a href="">Massachusetts</a>
</li>
<li>
<a href="">Rhode Island</a>
</li>
</ul>
</nav>
</div>
<div class="mobile">
<nav class="primary">
<ul>
<li class="mega">
<a href="">Maine <i class="fas fa-caret-down" aria-hidden=""></i></a>
<div class="dropdown">
<div class="menu">
<div>
<ul>
<li>
<a href="">Products</a>
</li>
<li>
<a href="">Services</a>
</li>
<li>
<a href="">Blog</a>
</li>
<li>
<a href="">About Us</a>
</li>
<li>
<a href="">Contact</a>
</li>
</ul>
</div>
<div>
<h3>Lorem Ipsum Dolar Amat</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis dignissimos quisquam numquam veniam eos reprehenderit, nemo sunt nihil rem suscipit.
</p>
<p>
Nemo sunt nihil rem lorem amat fuga consectetur adipisicing elit.
</p>
</div>
<div>
<img src="http://dummyimage.com/600x400/ff665b/ffffff.png&text=Just an image placeholder " alt="">
</div>
</div>
</div>
</li>
<li>
<a href="#yup">Markup <i class="fas fa-caret-down" aria-hidden=""></i></a>
<div class="dropdown">
<div class="menu">
<div>
<ul>
<li>
<a href="">Hello World</a>
</li>
<li>
<a href="">Lorem Ipsum Amat</a>
</li>
<li>
<a href="">HTML is on version 5</a>
</li>
</ul>
</div>
</div>
</div>
</li>
<li>
<a href="">New Hampshire</a>
</li>
<li>
<a href="">Vermont</a>
</li>
<li>
<a href="">Massachusetts</a>
</li>
<li>
<a href="">Rhode Island</a>
</li>
</ul>
</nav>
<div class="utilities">
<nav class="utility">
<ul>
<li><a href="">Careers</a></li>
<li><a href="">Legal</a></li>
<li><a href="">Log In</a></li>
</ul>
</nav>
<form class="search" method="post">
<div class="text">
<label for="search">Search the website</label>
<input id="search" placeholder="Search the website" type="text">
</div>
<div class="submit">
<input type="submit" value="Search">
</div>
</form>
</div>
</div>
</div>
</div>
</header>
///
/// The STICKY-HEADER mixin works with (sticky-header.plugin.js) to hide
/// a site’s header.primary element as you scroll down page. The element
/// reappears when the user scrolls up the page. This is
/// responsive as the "top" value is dynamically set in the
/// js based on the height of the header. Top padding is also added
/// to the body dynamically via js so that the header doesn't overlap any
/// content.
///
@mixin sticky-header() {
position: fixed;
top: 0;
transition: top 0.16s cubic-bezier(0, .40, .70, 1);
width: 100%;
z-index: 100;
}