#masthead{
/* Navigation Menu */
.main-navigation {
ul{
list-style: none;
padding: 0;
margin: 0;
&.ping-right {
left: auto;
right: 100%;
}
&.ping-left {
left: 100%;
right: auto;
}
}
}
/* Minimum width of 992 pixels. */
@media screen and (min-width: 992px) {
#cms-menu-mobile{
display: none !important;
}
.main-navigation{
> div {
ul{
/* First Level */
&:first-child{
> li{
display: inline-block;
padding: 0 40px 0 0;
margin: 0;
&:first-child{ padding-left: 0;}
&:last-child{ padding-right: 0;}
> a{
color: $menuColor;
font-size: $menuFontsize;
position: relative;
&:after{
display: block;
content: "";
width: 0;
position: absolute;
bottom: -5px;
left: 0;
border-bottom: 2px solid $menuColorHover;
@include transition();
}
&:hover{
color: $menuColorHover;
}
&:active,
&:focus,
&.active{
color: $menuColorActive;
}
}
&:hover,
&:focus,
&:active{
background: transparent;
> a{
color: $menuColorHover;
&:after{
width: 100%;
border-color: $menuColorHover;
}
}
}
&.current_page_item,
&.current-menu-ancestor{
> a{
color: $menuColorActive;
&:after{
width: 100%;
border-color: $menuColorActive;
}
}
}
&.has_full_width {
position: static; /* Fix for dropdown menu full width */
}
}
}
/* Level 2+ */
li{
position: relative;
@include transition();
ul{
margin: 40px 0 0 0;
padding: 20px 0;
position: absolute;
left: 0;
z-index: -1;
min-width: $dropdownWidth;
background-color: $dropdownBG;
visibility: hidden;
opacity: 0;
@include transition(all 300ms linear 0ms);
li{
display: block;
padding: 0 30px;
a{
display: block;
color: $dropdownColor;
padding: 6px 0;
font-size: $dropdownFontsize;
&:hover{
color: $dropdownColorHover;
}
}
/* Active State*/
&.current-menu-item,
&.current-menu-ancestor,
&.current_page_item,
&.current_page_ancestor{
background-color: $dropdownBGActive;
> a{
color: $dropdownColorActive;
}
}
/* Arrow for Parent item */
&.menu-item-has-children{
> a{
&:after{
display: block;
font-family: "FontAwesome";
content: "\f105";
position: absolute;
right: 30px;
top: 50%;
@include css3-prefix('transform','translateY(-50%)');
}
}
}
}
/* Menu touched on right/left of window*/
ul{
top: 0;
left: 100%;
&.back {
right: 100%;
left: auto;
ul:not(.back) {
right: 100%;
left: auto;
}
ul.back {
left: 100%;
right: auto;
ul:not(.back) {
left: 100%;
right: auto;
}
ul.back {
right: 100%;
left: auto;
}
}
}
}
}
&:hover{
background-color: $dropdownBGHover;
> a{
color: $dropdownColorHover;
}
> ul{ /* Level 2*/
margin-top:0;
width:auto;
z-index: 100;
visibility: visible;
opacity: 1;
li{ /* Level 3+ */
&:hover{
> ul{ /* Level 3+ */
margin-top: -20px;
margin-left: 1px;
&.back{ /* Menu touched to right side */
margin-left: 0;
margin-right: 1px;
}
}
}
}
}
}
}
/* Remove arrow open level 2+ for mobile menu */
.cms-menu-toggle{display: none;}
/* Mega Menu */
&:first-child{
> li {
> ul{
/* Multiple Columns */
&.multicolumn{
> li{
float: left;
padding: 0 0 0 30px;
a{
padding-left: 0; /* Remove Left/ Right space in menu item */
padding-right: 0;
}
/* Grouped */
&.group{
ul {
> li {
padding: 0;
}
}
/* Grouped arrow */
&.menu-item-has-children{
> a {
position: relative;
&:after{
content: "\f107";
right: 5px;
}
}
}
/* Grouped Title */
> a{
text-transform: uppercase;
border-bottom: 1px solid #222;
margin-bottom: 15px;
}
/* Submenu in group */
ul{
position: relative;
margin: 0;
visibility: visible;
opacity: 1;
padding: 0;
z-index: 1;
min-width: inherit;
width: 100%;
top: auto;
left: auto;
}
}
}
&.columns2{
> li{ width: 50%;}
}
&.columns3{
> li{ width: 33.3333%;}
}
&.columns4{
> li{ width: 25%;}
}
&.columns5{
> li{ width: 20%;}
}
/* Dropdown Position */
&.drop_to_right {
}
&.drop_to_left{
right: 0;
left: auto;
}
&.drop_to_center{
left: 50%;
@include css3-prefix('transform','translateX(-50%)');
}
&.drop_full_width {
width: 100% !important;
}
}
&.standard {
/* Dropdown Position */
&.drop_to_right {
}
&.drop_to_left{
right: 0;
left: auto;
}
&.drop_to_center{
left: 50%;
@include css3-prefix('transform','translateX(-50%)');
}
&.drop_full_width {
width: 100% !important;
}
}
}
}
}
}
}
/* menu Position */
&.pull-center{
display: inline-block;
position: relative;
left: 50%;
@include css3-prefix('transform','translateX(-50%)');
}
}
/* header layout */
&.header-v1{
#cms-header-navigation{
padding-top: 80px;
margin-top: 70px;
background: url(../images/icon-pink.png) top center no-repeat;
}
.main-navigation {
float: none;
> div {
float: none;
ul{
&:first-child {
width: 100%;
> li{
display: block;
padding: 8px 0;
}
}
/* Level 2+ */
ul{
left: 100%;
top: 0;
text-align: left;
}
}
}
}
/* Header on right sidebar */
&.header-right{
#cms-header-navigation{
.main-navigation{
ul{
li{
ul{
right: 100%;
left: auto;
text-align: right;
/* arrow for parent item */
li{
&.menu-item-has-children{
>a {
&:after{
right: auto;
left: 30px;
content: "\f104";
}
}
}
}
}
}
}
}
}
}
}
/* Fixed header */
.header-ontop{
.main-navigation {
> div {
ul{
&:first-child {
> li{
> a{
&:after{
}
}
&.current_page_item,
&.current-menu-ancestor{
> a{
&:after{
width: 100%;
}
}
}
}
}
}
}
}
}
/* Sticky Header */
.header-sticky{
.main-navigation {
> div {
ul{
&:first-child {
> li{
> a{
color: $header_sticky_menuColor;
&:hover,
&:active,
&:focus{
color: $header_sticky_menuColorHover;
&:after{
border-bottom-color:$header_sticky_menuColorHover;
}
}
&:after{
border-bottom-color:$header_sticky_menuColor;
}
}
&:hover,
&:active,
&:focus{
cursor: pointer;
> a{
color: $header_sticky_menuColorHover;
&:after{
border-bottom-color:$header_sticky_menuColorHover;
}
}
}
&.current_page_item,
&.current-menu-ancestor{
> a{
color: $header_sticky_menuColorActive;
&:after{
width: 100%;
border-bottom: 2px solid $header_sticky_menuColorActive;
}
}
}
}
}
}
}
}
}
}
/* Maximum width of 991 pixels. */
@media screen and (max-width: 991px) {
#cms-header-navigation {
background-color: $dropdownBGDevice;
position: absolute !important;
left: 0;
z-index: -1;
max-height: 0;
width: 100%;
visibility: hidden;
@include opacity(0);
@include transition(max-height,500ms,ease-in-out);
.main-navigation{
padding: 20px;
.cms-menu{
&.pull-left,
&.pull-right,
&.pull-center{
float: none !important;
}
}
ul{
padding: 0;
margin: 0;
list-style: none;
width: 100%;
background: transparent;
li {
position: relative;
a{
padding: 7px 60px 7px 0;
display: block;
color: $dropdownDeviceColor;
line-height: normal;
&:hover,
&:focus{
color: $dropdownDeviceColorHover;
}
&:active,
&:focus{
color: $dropdownDeviceColorActive;
}
}
/* Arrow open level 2+ */
.cms-menu-toggle{
position: absolute;
top: 0px;
right: 0;
width: 60px;
height: 38px;
line-height: 38px;
text-align: center;
color: $dropdownDeviceColor;
}
/* Level 2+*/
ul{
padding: 0 10px;
max-height: 0;
visibility: hidden;
width: 100% !important;
background: transparent;
@include opacity(0);
@include transition(max-height,500ms,ease-in-out);
&.submenu-open{
max-height: 500px;
visibility: visible;
@include opacity(1);
}
}
/* Hover state */
&:hover,
&:focus{
> a{
color: $dropdownDeviceColorHover;
}
}
&.current-menu-item,
&.current-menu-ancestor{
> a{
color: $dropdownDeviceColorActive;
}
}
}
}
}
&.phones-nav,
&.tablets-nav{
&.collapse{
z-index: 9;
display: block;
max-height: 1000px;
visibility: visible;
@include opacity(1);
.main-navigation{
}
}
}
}
.header-ontop{
#cms-header-navigation{
}
}
}
}
/* header v4 */
#cms-mainnav-v4{
padding-top: 110px;
> div {
max-width: 400px;
margin: 0 auto;
> ul{
float: none;
list-style: none inside;
padding: 0;
margin: 0;
/* First Level */
&:first-child{
> li {
position: relative;
> a{
font-size: $menu4FontSize;
color: $menu4Color;
text-transform: uppercase;
line-height: 76px;
letter-spacing: 1px;
&:hover{
color: $menu4ColorHover;
}
}
&:hover{
> a{
color: $menu4ColorHover;
}
}
&.current_page_item,
&.current-menu-ancestor{
> a{
color: $menu4ColorActive;
}
}
> .cms-menu-toggle{
top: 10px;
height: 50px;
line-height: 50px;
}
}
}
li{
position: relative;
/* Level 2+ */
ul{
float: none;
width: 100% !important;
list-style: none inside;
padding: 0;
margin: 0;
visibility: hidden;
max-height: 0;
visibility: hidden;
@include opacity(0);
@include transition(max-height,500ms,ease-in-out);
li{
a{
font-size: $menu4L2FontSize;
color: $menu4L2Color;
&:hover{
color: $menu4L2ColorHover;
}
}
&:hover{
> a{
color: $menu4L2ColorHover;
}
}
&.current_page_item,
&.current-menu-ancestor{
> a{
color: $menu4L2ColorActive;
}
}
}
&.submenu-open{
max-height: 500px;
visibility: visible;
@include opacity(1);
}
}
.cms-menu-toggle{
position: absolute;
top: 0px;
right: 15px;
color: $menu4Color;
width: 50px;
cursor: pointer;
}
}
}
}
.cms-mainnav-v4-logo{
padding-top: 25px;
padding-bottom: 27px;
}
#cms-hide-mainnav{
position: absolute;
top: 30px;
right: 30px;
font-size: 100px;
color: $menu4Color;
}
}
#site-navigation{
.cms-menu.pull-left{
@media (min-width: 992px){
margin-left: 100px;
}
}
}