There are no notes for this item.
<header class="primaryHeader">
<div class="container">
<div class="header-content">
<div class="branding">
<a href="https://github.com/imarc/boilerplate-compnents">
<img src="//imarc.github.io/boilerplate-components/media/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="" title="" style="">
</div>
</div>
</div>
</li>
<li>
<a href="#yup">Markup <i class="fa 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="fa fa-caret-down" aria-hidden="true"></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="fa fa-caret-down" aria-hidden="true"></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>
$(function () {
$('header.primary').stickyHeader()
$('nav.primary').dropdown()
$('.mobile').mobileNavigation()
})
.primaryHeader {
button.menu-toggle {
@include breakpoint(lg) {
display: none;
}
}
.container {
position: static;
}
.header-content {
padding: 1rem 0;
align-items: center;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
.menu-toggle:hover,
.menu-toggle:focus {
background-color: $link;
}
> .dropdown {
background-color: $gray-800;
z-index: 1001;
&.sub-menu {
background-color: $gray-700;
z-index: 1002;
}
}
}
@include breakpoint(lg) {
.header-content {
padding-bottom: 0;
}
}
.branding {
flex-basis: 180px;
flex-shrink: 0;
img {
max-width: 180px;
}
@include breakpoint(lg) {
margin-right: 2rem;
}
}
.desktop {
display: none;
@include breakpoint(lg) {
align-items: flex-end;
display: flex;
flex: 1 1 auto;
flex-flow: column nowrap;
justify-content: space-between;
nav.primary {
align-self: flex-start;
}
}
nav.primary {
@include dropdown;
margin-bottom: 0.7rem;
ul {
@include no-bullets;
display: flex;
li {
margin-bottom: 0;
}
}
a {
//color: #FFF;
display: block;
padding: 0 0 0.5rem;
}
li:hover a {
color: $primary;
}
> ul {
li {
margin-bottom: 0;
}
}
li a {
//color: #FFF;
}
li.active,
li:hover {
a {
color: $gray-300;
}
}
li.mega {
@include dropdown-mega();
}
@include breakpoint(lg) {
margin-bottom: 0;
> ul > li {
font-size: 1.1rem;
margin-left: 1rem;
padding-bottom: 1rem;
position: relative;
}
> ul > li:first-child {
margin-left: 0;
}
ul {
text-align: left;
li li {
display: block;
float: none;
}
}
}
}
}
nav.utility {
margin-bottom: 0.7rem;
ul {
@include no-bullets;
display: flex;
li {
margin-bottom: 0;
}
}
a {
color: #FFF;
display: block;
font-size: 0.8rem;
padding: 0 0.5rem;
}
}
.utilities {
@include breakpoint(lg) {
nav.utility {
margin-bottom: 0.4rem;
ul {
text-align: right;
}
}
}
}
.header-content > .dropdown,
.mobile {
@include mobileNavigation;
}
}