//Reset nav, nav ul {
list-style: none; margin: 0; padding: 0; width: 100%;
}
nav toggleMenu, nav hideMenu {
display: none;
}
// Navbar wrap .navbar {
height: $navbar-height; background-color: $navbar-color; flex-direction: column;
}
// Main navigation bar nav .primary-nav{
z-index: 2; position: relative; display: block;
}
nav >.primary-nav>li {
display: block; float: left; position: relative;
}
// Alignment of Social Icons nav>.primary-nav>.right>a {
padding: 0px;
}
// Main navigation links nav>.primary-nav>li>a {
/* Layout */ line-height: $navbar-height; display: block; padding: 0 22px; /* Typography */ font-family: $navbar-font-family; font-size: $navbar-font-size; font-weight: 700; color: $hamburger-icon-color; text-transform: uppercase; text-decoration: none; /* Transitions */ -webkit-transition: color .2s ease-in, border-top-color .2s ease-in; -ms-transition: color .2s ease-in, border-top-color .2s ease-in; -moz-transition: color .2s ease-in, border-top-color .2s ease-in; -o-transition: color .2s ease-in, border-top-color .2s ease-in; transition: color .2s ease-in, border-top-color .2s ease-in;
}
// Hover state of the links nav>.primary-nav>li:hover>a {
color: $navbar-hover-color; border-top-color: #fff;
}
// Active state of the links nav>.primary-nav>li.active {
background-color: $navbar-active-color;
}
nav>.primary-nav>li.dropdown>a {
padding-right: 28px;
}
nav>.dropdown a {
color: $header-link-color;
}
// Dropdown menu arrow} nav .primary-nav .dropdown>a::after {
position: absolute; display: block; content: ""; height: 0; width: 0; border: 4px solid transparent; border-top-color: $complimentary-color; right: 11px; top: ($navbar-height / 2);
}
nav > ul > li > a:hover > ul {
left: 0px; opacity: 1;
}
// Submenus nav .primary-nav ul {
z-index: auto; display: block; position: absolute; top: $navbar-height; left: -9999px; opacity: 0; background: $navbar-color; cursor: pointer; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; -webkit-transition: opacity .22s ease-in; -ms-transition: opacity .22s ease-in; -moz-transition: opacity .22s ease-in; -o-transition: opacity .22s ease-in; transition: opacity .22s ease-in;
}
nav .primary-nav ul li {
display: block; position: absolute; height: 0px; -webkit-transition: height .15s ease-in; -ms-transition: height .15s ease-in; -moz-transition: height .15s ease-in; -o-transition: height .15s ease-in; transition: height .15s ease-in;
}
// Submenu appears when its parent is hovered nav>.primary-nav>li:hover>ul {
left: 0px; opacity: 1;
}
nav .primary-nav li:hover>ul>li {
position: relative; height: 31px;
}
// Submenu links nav .primary-nav ul li a {
/* Layout */ display: block; padding: 7px 12px 7px 22px; width: 200px; /* Typography */ font-family: $navbar-font-family; font-size: ($navbar-font-size * .92); text-decoration: none; color: #fefefe; font-weight: 400; /* Background & effects */ background: $navbar-color; -webkit-transition: color .2s ease-in, border-left-color .2s ease-in;; -ms-transition: color .2s ease-in, border-left-color .2s ease-in;; -moz-transition: color .2s ease-in, border-left-color .2s ease-in;; -o-transition: color .2s ease-in, border-left-color .2s ease-in;; transition: color .2s ease-in, border-left-color .2s ease-in;;
}
// Change the link color on hover nav .primary-nav ul li:hover>a {
color: $navbar-hover-color; background: lighten($navbar-color, 10%);
}
.nav ul ul {
display: none;
}