Currently work in progress.
<header role="banner">
<nav class="nav-primary">
<div class="wrapper">
<ul class="nav-main">
<li class="logo"><a href="#"><svg role="img">
<use xlink:href="../../svg/svg-symbols.svg#modmore-icon"></use>
</svg></a></li>
<li class="nav-main__full-container"><a href="#" aria-haspopup="true">Extras</a>
<ul class="nav-main__full" aria-hidden="true" aria-label="submenu">
<li><a href="index.php?menu=tertiary" class="icon--redactor"><img src="../../assets/images/icons/redactor.svg" class="icon">Redactor</a></li>
<li><a href="index.php?menu=tertiary" class="icon--contentblocks"><img src="../../assets/images/icons/contentblocks.svg" class="icon">ContentBlocks</a></li>
<li><a href="index.php?menu=tertiary" class="icon--moregallery"><img src="../../assets/images/icons/moregallery.svg" class="icon">MoreGallery</a></li>
<li><a href="index.php?menu=tertiary" class="icon--commerce"><img src="../../assets/images/icons/commerce.svg" class="icon">Commerce</a></li>
<li><a href="index.php?menu=tertiary" class="icon--formalicious"><img src="../../assets/images/icons/formalicious.svg" class="icon">Formalicious</a></li>
<li><a href="index.php?menu=tertiary" class="icon--simplecart"><img src="../../assets/images/icons/simplecart.svg" class="icon">SimpleCart</a></li>
<li><a href="index.php?menu=tertiary" class="icon--extras"><img src="../../assets/images/icons/bars.svg" class="icon">Free Extras</a></li>
</ul>
</li>
<li><a href="index.php">Blog</a></li>
<li><a href="index.php">About</a></li>
<li><a href="#" aria-haspopup="true">Help</a>
<ul class="nav-main__sub" aria-hidden="true" aria-label="submenu">
<li><a href="#">Documentation</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Forum</a></li>
<li><a href="#">Open a Support Ticket</a></li>
<li><a href="#">Consults</a></li>
</ul>
</li>
<li class="nav-main__loggedin">
<a href="#">marcjenkins <img class="nav-main__avatar" src="//www.gravatar.com/avatar/ec08b93facdaf8489dde4404bc351c01?s=32&d=mm" width="32" height="32" alt="marcjenkins's avatar"></a>
<ul class="nav-main__sub nav-main__sub--right" aria-hidden="true" aria-label="submenu">
<li><a href="#">Edit Profile</a></li>
<li><a href="#">Billing</a></li>
<li><a href="#">Provider Authentication</a></li>
<li><a href="#">Licenses</a></li>
<li><a href="#">Affiliates</a></li>
<li><a href="index.php">Logout</a></li>
</ul>
</li>
</ul><!-- /nav-main -->
</div>
</nav>
</header>
/* No context defined. */
/*------------------------------------*\
Navigation
\*------------------------------------*/
/*# sourceMappingURL=header-primary.css.map */
{"version":3,"sourceRoot":"","sources":["header-primary.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA","file":"header-primary.css"}
/*------------------------------------*\
Navigation
\*------------------------------------*/
// /**
// * Menu defaults
// */
// [role='banner'] {
// -webkit-font-smoothing: antialiased;
// }
// .nav-main {
// display: inline-block;
// margin: 0;
// padding: 0;
// width: 100%;
// list-style: none;
// }
// .nav-main li {
// position: relative;
// display: block;
// @include bp(bp4) {
// display: inline-block;
// }
// }
// .nav-main li a {
// display: inline-block;
// padding: 0 $spacing;
// height: 40px;
// font-weight: 600;
// line-height: 40px;
// @include bp(bp4) {
// height: 56px;
// line-height: 56px;
// }
// &:hover {
// text-decoration: none;
// }
// }
// .nav-main li:hover {
// text-decoration: none;
// }
// .nav-main a:hover {
// color: color(primary);
// }
// /**
// * Primary nav
// */
// .nav-primary {
// background: color(primary);
// // background: #147EF2;
// }
// .nav-primary li a {
// height: 40px;
// color: #ffffff;
// font-weight: 600;
// line-height: 40px;
// @include bp(bp4) {
// height: 60px;
// line-height: 60px;
// }
// &:hover {
// color: color(grey-base);
// }
// }
// .nav-primary li:hover > a {
// background: color(grey-xlight);
// color: color(grey-dark);
// }
// .nav-primary .logo a:hover {
// background: none;
// }
// .nav-primary .logo svg {
// position: relative;
// top: 6px;
// height: 25px;
// width: 30px;
// fill: #fff;
// }
// .nav-primary .nav-main--active {
// background: #ffffff;
// a {
// color: color(grey-base);
// }
// }
// /**
// * Move help & login info to the right
// */
// @include bp(bp4) {
// .nav-main__loggedin,
// .nav-main__login {
// float: right;
// }
// }
// /**
// * Login or register nav
// */
// .nav-primary .nav-main__login {
// color: #ffffff;
// }
// .nav-primary .nav-main__login:hover > a {
// background: none;
// color: #ffffff;
// }
// .nav-primary .nav-main__login a:hover {
// background: none;
// color: #ffffff;
// a {
// color: #ffffff;
// }
// }
// .nav-primary .nav-main__login a:hover {
// color: #cccccc;
// }
// .nav-primary .nav-main__login a:last-child {
// padding-left: 0;
// }
// .nav-primary .nav-main__login a:first-child {
// padding-right: 0;
// }
// /**
// * Logged in nav
// */
// .nav-main__avatar {
// overflow: hidden;
// margin-left: 10px;
// border-radius: 50%;
// }
// /**
// * Sub menu
// */
// .nav-main li:hover .nav-main__sub {
// display: block;
// }
// @include bp(bp4) {
// .nav-main__sub {
// position: absolute;
// top: 60px;
// left: 0;
// z-index: 99;
// display: block;
// display: none;
// margin: 0;
// padding: $spacing-s $spacing;
// width: 250px;
// border-right: 1px solid color(grey-light);
// border-bottom: 1px solid color(grey-light);
// border-left: 1px solid color(grey-light);
// border-radius: 0 0 $border-radius $border-radius;
// background: color(grey-xlight);
// box-shadow: 0 3px 3px rgba(25, 25, 25, 0.10);
// list-style: none;
// }
// .nav-main__sub--right {
// right: 0;
// left: auto;
// }
// .nav-main__sub li {
// display: block;
// margin: 0;
// padding: 0;
// }
// .nav-main__sub li a {
// margin: 0;
// padding: $spacing-s 0;
// height: auto;
// color: color(grey-dark);
// line-height: 1em;
// &:hover {
// color: #999999;
// }
// }
// }
// /**
// * Extras menu
// */
// .nav-main__full-container:hover .nav-main__full {
// display: flex;
// }
// .nav-main__full-container {
// position: static!important;
// }
// .nav-main__full {
// position: absolute;
// top: 60px;
// right: 0;
// left: 0;
// z-index: 999;
// display: none;
// // display: flex;
// flex-flow: row wrap;
// margin: 0;
// padding: $spacing-s $spacing;
// width: 100%;
// border-bottom: 1px solid color(grey-light);
// background: color(grey-xlight);
// box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
// list-style: none;
// }
// .nav-main__full li {
// margin: 0;
// width: 14.285714286%;
// text-align: center;
// }
// .nav-main__full .ss-icon {
// display: inline-block;
// margin-bottom: 10px;
// color: color(grey-dark);
// line-height: 1em;
// @include font-size(70px);
// }
// .nav-main__full .icon {
// display: block;
// margin: 0 auto 20px auto;
// height: 70px;
// }
// .nav-main__full li a {
// display: block;
// margin: 20px 10px 0px 10px;
// padding: 0 0 20px 0;
// height: auto;
// // border-bottom: 8px solid color(grey-xlight);
// color: color(grey-dark);
// line-height: 1em;
// opacity: 0.7;
// transition: opacity 0.3s;
// &:hover {
// opacity: 1;
// }
// &:after {
// display: block;
// margin-top: 20px;
// content: '';
// transition: width .3s;
// transition: transform 250ms ease-in-out;
// border-bottom: solid 6px color(grey-xlight);
// transform: scaleX(0);
// }
// &:hover:after {
// width: 100%;
// transform: scaleX(1);
// }
// &:hover.icon--redactor:after {
// border-bottom: 6px solid #f17731;
// }
// &:hover.icon--contentblocks:after {
// border-bottom: 6px solid #0073e9;
// }
// &:hover.icon--moregallery:after {
// border-bottom: 6px solid #ffd84d;
// }
// &:hover.icon--commerce:after {
// border-bottom: 6px solid #00c1f1;
// }
// &:hover.icon--formalicious:after {
// border-bottom: 6px solid #bc23dc;
// }
// &:hover.icon--simplecart:after {
// border-bottom: 6px solid #ff396a;
// }
// &:hover.icon--extras:after {
// border-bottom: 6px solid #4bc2f2;
// }
// }
// .nav-main__full .icon {
// display: block;
// }