Skip to content

Instantly share code, notes, and snippets.

@sevenspark sevenspark/custom.css Secret
Created Dec 2, 2013

Embed
What would you like to do?
UberMenu 960px Responsive Breakpoint
/*
* UBERMENU 2.0 - DO NOT EDIT!!!
*
* Under penalty of death, never, ever, not ever, neverneverevernever edit this file. Swear it!
* Seriously, just don't. If you edit this file, or change it in any way, consider your (non-existent)
* warranty null and void. You have been warned.
*
* Need to customize your styles? Check out the Customization section of the Support Guide.
*/
/* Reset */
#megaMenu.megaResetStyles div,
#megaMenu.megaResetStyles span,
#megaMenu ul.megaMenu,
#megaMenu ul.sub-menu,
#megaMenu ul.um-sidebar,
#megaMenu li.menu-item,
#megaMenu li.widget,
#megaMenu li.menu-item > a,
#megaMenu img.um-img {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
text-shadow: none;
visibility: visible;
opacity: 1;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: visible;
}
/**** ALL ****/
#megaMenu {
position: relative;
line-height: 1em;
overflow: visible;
zoom: 1;
display: block;
float: left;
height: auto;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
#megaMenu.megaFullWidth {
width: 100%;
}
#megaMenu ul.megaMenu,
#megaMenu ul.sub-menu {
/* All UL */
list-style: none outside none;
margin: 0px;
padding: 0px;
position: relative;
overflow: visible;
zoom: 1;
}
#megaMenu ul.megaMenu li.menu-item,
#megaMenu ul.megaMenu li.widget {
margin-bottom: 0px;
list-style-type: none;
list-style-image: none;
border: none;
text-align: left;
float: none;
}
#megaMenu ul.megaMenu li.menu-item > a,
#megaMenu ul.megaMenu li.menu-item > span.um-anchoremulator {
line-height: 1.4em;
text-decoration: none;
cursor: pointer;
-webkit-transition: all 0.1s ease-in-out;
-moz-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out;
}
#megaMenu ul.megaMenu li.menu-item > a span,
#megaMenu ul.megaMenu li.menu-item > span.um-anchoremulator span {
color: inherit;
font-size: inherit;
}
/**** TOP LEVEL ****/
#megaMenu ul.megaMenu {
float: left;
z-index: 100;
}
#megaMenu.megaMenuHorizontal ul.megaMenu {
width: 100%;
}
#megaMenu ul.megaMenu > li.menu-item {
float: left;
position: relative;
display: inline-block;
/*line-height:1em;*/
padding: 0px 0px;
margin: 0px;
z-index: 200;
zoom: 1;
}
#megaMenu ul.megaMenu > li.menu-item > a,
#megaMenu ul.megaMenu > li.menu-item > span.um-anchoremulator {
display: block;
padding: 12px 15px;
position: relative;
float: none;
z-index: 400;
zoom: 1;
border-width: 0px 0px 0px 1px;
/* No Bouncing */
border-style: solid;
border-color: transparent;
}
#megaMenu.megaMenuHorizontal ul.megaMenu > li.menu-item:first-child > a {
border-left: none;
}
#megaMenu.megaMenuVertical ul.megaMenu > li.menu-item:first-child > a {
border-top: none;
}
#megaMenu ul.megaMenu > li.menu-item:hover,
#megaMenu ul.megaMenu > li.menu-item.megaHover,
#megaMenu ul.megaMenu > li.menu-item:hover > a,
#megaMenu ul.megaMenu > li.menu-item.megaHover > a,
#megaMenu ul.megaMenu > li.menu-item:hover > span.um-anchoremulator,
#megaMenu ul.megaMenu > li.menu-item.megaHover > span.um-anchoremulator {
z-index: 600;
}
/**** DROP LEVEL ****/
#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-mega {
position: static;
}
#megaMenu.megaMenu-nojs ul ul.sub-menu {
display: none;
}
#megaMenu ul ul.sub-menu {
position: absolute;
left: auto;
z-index: 500;
float: left;
zoom: 1;
overflow: visible;
visibility: visible;
margin: 0;
}
/*#megaMenu ul ul.sub-menu-1,*/
#megaMenu ul li.menu-item.ss-nav-menu-reg ul.sub-menu-1 {
min-width: 99%;
}
#megaMenu ul li.menu-item.ss-nav-menu-reg ul.sub-menu ul.sub-menu {
min-width: 120px;
}
#megaMenu.megaMenuHorizontal ul.megaMenu > li.menu-item > ul.sub-menu.sub-menu-1 {
/*border-top:none;*/
/* removes border overlap effect */
border-top-left-radius: 2px;
border-top-right-radius: 2px;
/* IE7 is dumb */
*left: 0;
*top: 100%;
}
#megaMenu ul li.menu-item.ss-nav-menu-mega ul.sub-menu li.menu-item {
min-width: 100px;
}
#megaMenu ul li.menu-item.ss-nav-menu-reg ul.sub-menu li.menu-item {
min-width: 50px;
position: relative;
}
#megaMenu ul li.menu-item.ss-nav-menu-reg ul.sub-menu li.menu-item > a,
#megaMenu ul li.menu-item.ss-nav-menu-reg ul.sub-menu li.menu-item > span.um-anchoremulator {
white-space: nowrap;
}
#megaMenu ul ul.sub-menu li.menu-item > a,
#megaMenu ul ul.sub-menu li.menu-item > span.um-anchoremulator {
padding: 3px 0px;
margin: 3px 0px;
line-height: 1.4em;
width: auto;
display: block;
}
#megaMenu ul li.menu-item.ss-nav-menu-mega ul ul.sub-menu li.menu-item > a,
#megaMenu ul li.menu-item.ss-nav-menu-mega ul ul.sub-menu li.menu-item > span.um-anchoremulator,
#megaMenu ul ul.sub-menu li.menu-item > a,
#megaMenu ul ul.sub-menu li.menu-item > span.um-anchoremulator {
background: transparent;
}
#megaMenu.megaMenu-nojs ul li.menu-item:hover > ul.sub-menu-1 {
display: block;
visibility: visible;
}
#megaMenu.megaMenu-withjs ul li.menu-item:hover > ul.sub-menu-1 {
display: none;
}
#megaMenu ul li.menu-item.ss-nav-menu-mega ul.sub-menu ul.sub-menu {
display: block;
position: relative;
top: auto;
left: auto;
}
#megaMenu li.menu-item ul.sub-menu {
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
}
#megaMenu li.menu-item.ss-nav-menu-mega ul.sub-menu.sub-menu-1 {
border: 1px solid transparent;
padding: 0px;
width: auto;
white-space: nowrap;
left: auto;
max-width: 100%;
}
#megaMenu.wpmega-nojs li.menu-item.ss-nav-menu-mega ul.sub-menu.sub-menu-1,
#megaMenu.megaFullWidthSubs li.menu-item.ss-nav-menu-mega ul.sub-menu.sub-menu-1,
#megaMenu li.menu-item.ss-nav-menu-mega.ss-nav-menu-mega-fullWidth ul.sub-menu.sub-menu-1 {
/* Menu Item option */
width: 100%;
left: -1px;
/*left:0px;
box-sizing:border-box;*/
}
#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-mega-floatRight {
float: right;
}
/* Align Submenu Left */
#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-mega.ss-nav-menu-mega-alignLeft ul.sub-menu.sub-menu-1 {
left: 0px;
}
/* Align Submenu Right */
#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-mega.ss-nav-menu-mega-alignRight ul.sub-menu.sub-menu-1 {
right: 0px;
left: auto;
}
#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-mega ul.sub-menu-1 > li.menu-item {
display: inline-block;
float: left;
margin-top: 5px;
margin-bottom: 5px;
position: relative;
}
#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-mega ul.sub-menu-1 > li.menu-item > a,
#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-mega ul.sub-menu-1 > li.menu-item > span.um-anchoremulator,
#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-mega ul ul.sub-menu .ss-nav-menu-header > a,
#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-mega ul ul.sub-menu .ss-nav-menu-header > span.um-anchoremulator,
#megaMenu .wpmega-widgetarea h2.widgettitle {
margin-bottom: .6em;
}
#megaMenu ul li.menu-item.ss-nav-menu-mega ul ul.sub-menu li.menu-item,
#megaMenu ul li.menu-item.ss-nav-menu-mega ul ul.sub-menu li.widget {
display: block;
}
#megaMenu ul li.menu-item {
font-size: 12px;
list-style-image: none;
letter-spacing: 0px;
}
/* Submenu Structure */
#megaMenu ul li.menu-item.ss-nav-menu-mega ul.sub-menu li.menu-item,
#megaMenu ul li.menu-item.ss-nav-menu-mega ul.sub-menu li.widget {
font-size: 11px;
min-width: 100px;
}
#megaMenu ul li.menu-item.ss-nav-menu-mega ul.sub-menu li.menu-item > a,
#megaMenu ul li.menu-item.ss-nav-menu-mega ul.sub-menu li.menu-item > span.um-anchoremulator {
width: auto;
display: block;
background: transparent;
}
#megaMenu ul li.menu-item.ss-nav-menu-mega ul.sub-menu > li.menu-item:hover > a {
background: transparent;
}
#megaMenu ul li.menu-item.ss-nav-menu-mega ul li.menu-item.ss-nav-menu-item-depth-1 {
padding: 11px 27px;
/* Do it in pixels, because IE can't handle rounding ems properly */
}
#megaMenu ul li.menu-item.ss-nav-menu-mega ul ul.sub-menu {
width: auto;
float: none;
}
#megaMenu ul li.menu-item.ss-nav-menu-mega ul ul.sub-menu li.menu-item {
display: block;
float: none;
}
#megaMenu ul li.menu-item.ss-nav-menu-mega ul.sub-menu li.menu-item.ss-nav-menu-verticaldivision {
clear: both;
}
#megaMenu ul li.menu-item.ss-nav-menu-mega ul.sub-menu li.menu-item.sub-menu-newcol {
float: left;
}
#megaMenu li.menu-item.ss-nav-menu-mega .ss-nav-menu-header a,
#megaMenu li.menu-item.ss-nav-menu-mega .ss-nav-menu-header span.um-anchoremulator {
font-weight: normal;
}
#megaMenu li.menu-item.ss-nav-menu-mega .ss-nav-menu-header > a,
#megaMenu li.menu-item.ss-nav-menu-mega .ss-nav-menu-header > span.um-anchoremulator {
font-weight: bold;
margin-bottom: 4px;
}
#megaMenu li.menu-item.ss-nav-menu-mega .megaMenu-thumb {
width: 15px;
height: 15px;
margin-right: 5px;
vertical-align: middle;
}
#megaMenu ul li.menu-item.ss-nav-menu-reg a,
#megaMenu ul li.menu-item.ss-nav-menu-reg span.um-anchoremulator {
display: block;
}
#megaMenu ul li.menu-item.ss-nav-menu-reg ul.sub-menu-1 {
border: 1px solid transparent;
padding-top: 6px;
padding-bottom: 6px;
}
#megaMenu ul li.menu-item.ss-nav-menu-reg ul.sub-menu li.menu-item > a,
#megaMenu ul li.menu-item.ss-nav-menu-reg ul.sub-menu li.menu-item > span.um-anchoremulator {
margin: 0px;
padding: 6px 20px 6px 15px;
position: relative;
}
#megaMenu ul li.menu-item.ss-nav-menu-reg ul.sub-menu ul.sub-menu {
top: -1px;
border-style: solid;
border-width: 1px;
}
#megaMenu.megaMenu-nojs ul li.menu-item.ss-nav-menu-reg ul.sub-menu > li.menu-item:hover > ul.sub-menu {
display: block;
left: 100%;
}
#megaMenu.megaMenu-withjs ul li.menu-item.ss-nav-menu-reg ul.sub-menu > li.menu-item > ul.sub-menu {
display: none;
left: 100%;
top: -1px;
}
#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-reg.ss-nav-menu-flyout-left ul.sub-menu > li.menu-item > ul.sub-menu {
left: auto;
right: 100%;
}
#megaMenu ul.megaMenu li.menu-item.uber-flyout-left > ul.sub-menu,
#megaMenu ul.megaMenu > li.menu-item.uber-flyout-left-all ul ul.sub-menu,
#megaMenu ul.megaMenu ul.sub-menu li.menu-item.uber-flyout-left-all ul.sub-menu {
left: auto !important;
right: 100% !important;
border-left: 1px solid #ddd !important;
border-right: none !important;
box-shadow: none !important;
}
/* Flyout menus aligned right and flyout left */
#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-reg.um-flyout-align-right ul.sub-menu {
left: auto;
right: 0;
}
#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-reg.um-flyout-align-right ul.sub-menu li.menu-item > a,
#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-reg.um-align-right ul.sub-menu li.menu-item > span.um-anchoremulator {
padding-left: 20px;
padding-right: 10px;
}
#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-reg.um-flyout-align-right li.menu-item.megaReg-with-sub > a:after,
#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-reg.um-flyout-align-right li.menu-item.megaReg-with-sub > span.um-anchoremulator:after {
border-right-color: #ccc;
border-left-color: transparent;
left: 3px;
right: auto;
}
#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-reg.um-flyout-align-right ul.sub-menu > li.menu-item > ul.sub-menu {
left: auto;
right: 100%;
box-shadow: none;
}
/* Highlights */
#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-highlight > a,
#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-highlight > span.um-anchoremulator {
color: #4D90FE;
}
/* Titles and Descriptions */
#megaMenu .wpmega-link-title {
display: block;
line-height: 1.4em;
color: inherit;
}
#megaMenu .wpmega-item-description {
display: block;
/* inline */
clear: none;
float: none;
line-height: 10px;
font-size: 11px;
padding-bottom: 3px;
font-weight: normal;
color: inherit;
white-space: normal;
}
/* Non-links */
#megaMenu ul.megaMenu > li.menu-item > .wpmega-nonlink {
padding: 3px 12px;
}
#megaMenu .wpmega-nonlink {
width: auto;
white-space: normal;
}
#megaMenu .wpmega-nonlink ul {
display: block;
position: relative;
left: auto;
top: auto;
width: auto;
float: none;
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
zoom: 1;
width: 100%;
}
#megaMenu .wpmega-nonlink ul li.widget {
margin-bottom: 1em;
float: left;
clear: none;
}
#megaMenu .wpmega-nonlink .widgettitle {
margin-bottom: .6em;
}
#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-mega ul.sub-menu li.menu-item.ss-nav-menu-item-depth-1.fullWidthRow,
#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-mega ul.sub-menu li.menu-item.ss-nav-menu-item-depth-1.ss-sidebar {
margin-right: 0px;
width: 100%;
/* widget area must be full width */
padding-left: 0;
padding-right: 0;
}
#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-mega ul.sub-menu li.menu-item.ss-nav-menu-item-depth-1.ss-sidebar > a,
#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-mega ul.sub-menu li.menu-item.ss-nav-menu-item-depth-1.ss-sidebar > span.um-anchoremulator {
margin: 0 2.9% 1em 2.9%;
}
#megaMenu .wpmega-widgetarea h2.widgettitle {
font-size: 12px;
line-height: 1.6em;
}
/* Full Width Menu, Widget & Shortcode Columns */
#megaMenu ul ul .wpmega-nonlink.wpmega-widgetarea ul {
float: left;
}
#megaMenu .ss-colgroup .ss-col,
#megaMenu .wpmega-nonlink li.widget,
#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-mega.mega-colgroup > ul > li {
float: left;
padding-left: 2.9%;
padding-right: 2.9%;
/* width = FLOOR( ( 100 - (n * (5.8) ) ) / n ), .1 )*/
}
#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-mega.mega-colgroup ul.sub-menu li.menu-item {
min-width: 0;
white-space: normal;
}
/* 1 */
#megaMenu .wpmega-nonlink.ss-colgroup-1 li,
#megaMenu ul.megaMenu li.ss-nav-menu-mega.mega-colgroup-1 > ul > li {
width: 94.2%;
}
/* 1/2 */
#megaMenu .ss-colgroup-2 > .ss-col,
#megaMenu .wpmega-nonlink.ss-colgroup-2 li,
#megaMenu ul.megaMenu li.ss-nav-menu-mega.mega-colgroup-2 > ul > li {
width: 44.2%;
}
/* 1/3 */
#megaMenu .ss-colgroup-3 > .ss-col,
#megaMenu .wpmega-nonlink.ss-colgroup-3 li,
#megaMenu ul.megaMenu li.ss-nav-menu-mega.mega-colgroup-3 > ul > li {
width: 27.5%;
}
/* 2/3 */
#megaMenu .ss-colgroup-3 > .ss-col.ss-colspan-2,
#megaMenu .wpmega-nonlink.ss-colgroup-3 li.ss-colspan-2 {
width: 60.8%;
/* (27.5 + 2.9)*2 */
}
/* 1/4 */
#megaMenu .ss-colgroup-4 > .ss-col,
#megaMenu .wpmega-nonlink.ss-colgroup-4 li,
#megaMenu ul.megaMenu li.ss-nav-menu-mega.mega-colgroup-4 > ul > li {
width: 19.2%;
}
/* 2/4 */
#megaMenu .ss-colgroup-4 > .ss-col.ss-colspan-2,
#megaMenu .wpmega-nonlink.ss-colgroup-4 li.ss-colspan-2 {
width: 44.2%;
}
/* 3/4 */
#megaMenu .ss-colgroup-4 > .ss-col.ss-colspan-3,
#megaMenu .wpmega-nonlink.ss-colgroup-4 li.ss-colspan-3 {
width: 69.2%;
}
/* 1/5 */
#megaMenu .ss-colgroup-5 > .ss-col,
#megaMenu .wpmega-nonlink.ss-colgroup-5 li,
#megaMenu ul.megaMenu li.ss-nav-menu-mega.mega-colgroup-5 > ul > li {
width: 14.2%;
}
/* 2/5 */
#megaMenu .ss-colgroup-5 > .ss-col.ss-colspan-2,
#megaMenu .wpmega-nonlink.ss-colgroup-5 li.ss-colspan-2 {
width: 34.2%;
}
/* 3/5 */
#megaMenu .ss-colgroup-5 > .ss-col.ss-colspan-3,
#megaMenu .wpmega-nonlink.ss-colgroup-5 li.ss-colspan-3 {
width: 54.2%;
}
/* 4/5 */
#megaMenu .ss-colgroup-5 > .ss-col.ss-colspan-4,
#megaMenu .wpmega-nonlink.ss-colgroup-5 li.ss-colspan-4 {
width: 74.2%;
}
#megaMenu .wpmega-nonlink li.widget li {
width: auto;
}
/* 1/6 */
#megaMenu .ss-colgroup-6 > .ss-col,
#megaMenu .wpmega-nonlink.ss-colgroup-6 li,
#megaMenu ul.megaMenu li.ss-nav-menu-mega.mega-colgroup-6 > ul > li {
width: 10.8%;
}
/* 1/7 */
#megaMenu .ss-colgroup-7 > .ss-col,
#megaMenu .wpmega-nonlink.ss-colgroup-7 li,
#megaMenu ul.megaMenu li.ss-nav-menu-mega.mega-colgroup-7 > ul > li {
width: 8.4%;
}
/* 1/8 */
#megaMenu .ss-colgroup-8 > .ss-col,
#megaMenu .wpmega-nonlink.ss-colgroup-8 li,
#megaMenu ul.megaMenu li.ss-nav-menu-mega.mega-colgroup-8 > ul > li {
width: 6.7%;
}
/* Start new rows automatically in browsers that support nth-child */
#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-mega.mega-colgroup-2 > ul > li.menu-item:nth-child(2n+1),
#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-mega.mega-colgroup-3 > ul > li.menu-item:nth-child(3n+1),
#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-mega.mega-colgroup-4 > ul > li.menu-item:nth-child(4n+1),
#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-mega.mega-colgroup-5 > ul > li.menu-item:nth-child(5n+1),
#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-mega.mega-colgroup-6 > ul > li.menu-item:nth-child(6n+1) {
clear: both;
}
#megaMenu ul ul.sub-menu li.menu-item .wpmega-nonlink a {
padding: 0px;
}
/* ========================================== */
/* ARROW INDICATORS STYLES */
/* ========================================== */
/* Display links as block */
#megaMenu ul.megaMenu li.menu-item.mega-with-sub > a,
#megaMenu ul.megaMenu li.menu-item.mega-with-sub > span.um-anchoremulator,
#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-mega > a,
#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-mega > span.um-anchoremulator {
display: block;
}
/* Pad the right edge to make room for the arrow */
#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-reg ul.sub-menu li.menu-item.megaReg-with-sub > a,
#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-reg ul.sub-menu li.menu-item.megaReg-with-sub > span.um-anchoremulator,
#megaMenu ul.megaMenu li.menu-item.mega-with-sub > a,
#megaMenu ul.megaMenu li.menu-item.mega-with-sub > span.um-anchoremulator,
#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-mega > a,
#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-mega > span.um-anchoremulator {
padding-right: 20px;
}
/* Add the arrows as pseudo elements */
#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-reg li.menu-item.megaReg-with-sub > a:after,
#megaMenu ul.megaMenu li.menu-item.mega-with-sub > a:after,
#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-mega > a:after,
#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-reg li.menu-item.megaReg-with-sub > span.um-anchoremulator:after,
#megaMenu ul.megaMenu li.menu-item.mega-with-sub > span.um-anchoremulator:after,
#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-mega > span.um-anchoremulator:after {
content: '';
position: absolute;
top: 50%;
right: 8px;
margin-top: -1px;
display: inline-block;
background: transparent;
border-style: solid dashed dashed;
border-color: transparent;
border-top-color: #999;
font-size: 0;
border-width: 3px 3px 0;
padding-top: 1px;
}
/* For second+ level flyout menus, point the arrow right instead of down */
#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-reg li.menu-item.megaReg-with-sub > a:after,
#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-reg li.menu-item.megaReg-with-sub > span.um-anchoremulator:after {
width: 0;
height: 0;
border-top: 3px solid transparent;
border-bottom: 3px solid transparent;
border-left: 3px solid #999;
padding-top: 0;
padding-right: 2px;
margin-top: -2px;
right: 3px;
}
/* ========================================== */
/* DIVIDER STYLES */
/* ========================================== */
#megaMenu .wpmega-divider-container {
width: 100%;
margin: 0px;
}
#megaMenu .wpmega-divider {
border: none;
border-top: 1px solid #ddd;
border-bottom: 1px solid #fff;
/*margin:0px 10px 10px 10px;*/
margin: 0px 0px 10px 0px;
clear: both;
height: 0px;
display: block;
}
#megaMenu .fullWidthRow .wpmega-divider {
margin: 0 2.9% 10px 2.9%;
}
/* ========================================== */
/* LINK + IMAGE STYLES */
/* ========================================== */
#megaMenu .ss-nav-menu-with-img {
min-height: 20px;
/* Height of Pic + Space */
}
#megaMenu > ul > li.menu-item.ss-nav-menu-with-img {
min-height: 0px;
}
#megaMenu .ss-nav-menu-with-img img {
float: left;
display: block;
}
#megaMenu .ss-nav-menu-with-img.ss-nav-menu-notext > a > img,
#megaMenu .ss-nav-menu-with-img.ss-nav-menu-notext > span.um-anchoremulator > img {
float: none;
}
#megaMenu .ss-nav-menu-with-img.ss-nav-menu-notext > a > .wpmega-item-description,
#megaMenu .ss-nav-menu-with-img.ss-nav-menu-notext > span.um-anchoremulator > .wpmega-item-description {
padding-left: 0px;
padding-bottom: 0px;
}
#megaMenu .ss-nav-menu-with-img > a > .wpmega-link-title,
#megaMenu .ss-nav-menu-with-img > a > .wpmega-link-description,
#megaMenu .ss-nav-menu-with-img > a > .wpmega-item-description,
#megaMenu .ss-nav-menu-with-img > span.um-anchoremulator > .wpmega-link-title,
#megaMenu .ss-nav-menu-with-img > span.um-anchoremulator > .wpmega-link-description,
#megaMenu .ss-nav-menu-with-img > span.um-anchoremulator > .wpmega-item-description {
padding-left: 30px;
/* Width of Pic + Space */
display: block;
}
#megaMenu ul li.menu-item ul .ss-nav-menu-with-img > a:before,
#megaMenu ul li.menu-item ul .ss-nav-menu-with-img > a:after {
content: "";
display: table;
}
#megaMenu ul li.menu-item ul .ss-nav-menu-with-img > a:after {
clear: both;
}
#megaMenu ul li.menu-item ul .ss-nav-menu-with-img:not(.megaReg-with-sub) > a:after {
border: none !important;
}
/* ========================================== */
/* VERTICAL MENU STYLES */
/* ========================================== */
#megaMenu.megaMenuVertical ul.megaMenu > li.menu-item {
padding: 0px;
display: block;
}
#megaMenu ul.megaMenu > li.menu-item > a,
#megaMenu ul.megaMenu > li.menu-item > span.um-anchoremulator {
border-left: none;
}
#megaMenu.megaMenuVertical ul.megaMenu li.menu-item.ss-nav-menu-item-depth-0 {
display: block;
float: none;
clear: none;
}
#megaMenu.megaMenuVertical ul.megaMenu > li.menu-item.ss-nav-menu-mega > a,
#megaMenu.megaMenuVertical ul.megaMenu li.menu-item.mega-with-sub > a,
#megaMenu.megaMenuVertical ul.megaMenu li.menu-item.ss-nav-menu-mega > a,
#megaMenu.megaMenuVertical ul.megaMenu > li.menu-item.ss-nav-menu-mega > span.um-anchoremulator,
#megaMenu.megaMenuVertical ul.megaMenu li.menu-item.mega-with-sub > span.um-anchoremulator,
#megaMenu.megaMenuVertical ul.megaMenu li.menu-item.ss-nav-menu-mega > span.um-anchoremulator {
display: block;
}
/*#megaMenu.megaMenuVertical ul li.menu-item.ss-nav-menu-reg li.menu-item.megaReg-with-sub > a:after,*/
#megaMenu.megaMenuVertical ul.megaMenu li.menu-item.mega-with-sub > a:after,
#megaMenu.megaMenuVertical ul.megaMenu li.menu-item.ss-nav-menu-mega > a:after,
#megaMenu.megaMenuVertical ul.megaMenu li.menu-item.mega-with-sub > span.um-anchoremulator:after,
#megaMenu.megaMenuVertical ul.megaMenu li.menu-item.ss-nav-menu-mega > span.um-anchoremulator:after {
top: 50%;
right: 8px;
margin-top: -1px;
border-style: solid none solid solid;
border-color: transparent;
border-left-color: #999;
border-width: 2px 0px 2px 3px;
padding-right: 1px;
}
#megaMenu.megaMenuVertical ul.megaMenu li.menu-item.ss-nav-menu-item-depth-0 ul.sub-menu-1 {
top: 0px;
left: 100%;
width: auto;
max-width: 720px;
/*margin-left:-1px;*/
}
#megaMenu.megaMenuVertical ul.megaMenu li.menu-item.ss-nav-menu-reg ul.sub-menu {
padding: 4px 0px;
}
/* ========================================== */
/* CENTERING STYLES */
/* ========================================== */
/* Centering Menu Bar */
#megaMenu.megaCenterMenubar,
#megaMenu.megaCenterInner ul.megaMenu {
margin: 0 auto;
float: none;
}
#megaMenu.megaCenterMenubar ul.megaMenu {
float: none;
}
/* Center menu items */
#megaMenu.megaCenterMenuItems ul.megaMenu {
text-align: center;
}
#megaMenu.megaCenterMenuItems ul.megaMenu > li.menu-item {
float: none;
}
#megaMenu.megaCenterMenuItems.megaMenuHorizontal ul.megaMenu > li.menu-item:first-child > a,
#megaMenu.megaCenterMenuItems.megaMenuHorizontal ul.megaMenu > li.menu-item:first-child > span.um-anchoremulator {
box-shadow: none;
}
#megaMenu.megaCenterMenuItems .ss-nav-menu-with-img.ss-nav-menu-notext > a > img,
#megaMenu.megaCenterMenuItems .ss-nav-menu-with-img.ss-nav-menu-notext > span.um-anchoremulator > img {
display: inline;
margin-bottom: -3px;
}
/* ========================================== */
/* SEARCHBAR STYLES */
/* ========================================== */
/* Top Level Search Bar */
#megaMenu > ul.megaMenu > li.menu-item > .wpmega-widgetarea {
padding-left: 10px;
padding-right: 10px;
}
#megaMenu > ul.megaMenu > li.menu-item > .wpmega-widgetarea > ul > li {
margin: 0px;
}
#megaMenu > ul.megaMenu > li.menu-item > .wpmega-widgetarea > ul > li > .widgettitle {
float: left;
}
/* V2 */
#megaMenu > ul.megaMenu > li.menu-item > .wpmega-nonlink > form#searchform.ubersearch-v2 {
margin: 2px 0 0 0;
padding: 2px 0 0 0;
position: relative;
}
#megaMenu > ul.megaMenu > li.menu-item > .wpmega-nonlink > form#searchform.ubersearch-v2 .ubersearch {
position: relative;
}
#megaMenu > ul.megaMenu > li.menu-item > .wpmega-nonlink > form#searchform.ubersearch-v2 input[type="text"] {
width: 155px;
height: 26px;
border-width: 1px;
border-style: solid;
float: left;
padding: 6px 6px;
margin: 0;
-moz-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0;
line-height: 18px;
margin-bottom: 0;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
background: #999;
background: rgba(255, 255, 255, 0.2);
border: none;
color: white;
}
#megaMenu > ul.megaMenu > li.menu-item > .wpmega-nonlink > form#searchform.ubersearch-v2 label {
display: none;
}
#megaMenu ul.megaMenu > li.menu-item > .wpmega-nonlink > form#searchform.ubersearch-v2 input[type="text"]::-webkit-input-placeholder {
color: #ddd;
}
#megaMenu ul.megaMenu > li.menu-item > .wpmega-nonlink > form#searchform.ubersearch-v2 input[type="text"]::-moz-input-placeholder {
color: #ddd;
}
#megaMenu ul.megaMenu > li.menu-item > .wpmega-nonlink > form#searchform.ubersearch-v2 input[type="text"]:-ms-input-placeholder {
color: #ddd;
}
#megaMenu > ul.megaMenu > li.menu-item > .wpmega-nonlink > form#searchform.ubersearch-v2 input[type="submit"] {
display: block;
position: absolute;
top: 0px;
right: 0;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
height: 26px;
border: none;
box-shadow: none;
margin: 0;
line-height: 12px;
font-size: 9px;
padding: 2px 8px;
cursor: pointer;
background: #333;
background: rgba(0, 0, 0, 0.5);
color: #eee;
font-weight: bold;
}
#megaMenu > ul.megaMenu > li.menu-item > .wpmega-nonlink > form#searchform.ubersearch-v2 input[type="submit"]:hover {
background: #555;
background: rgba(0, 0, 0, 0.3);
}
#megaMenu > ul.megaMenu > li.menu-item > .wpmega-nonlink > form#searchform.ubersearch-v2 input[type="submit"]:active {
background: #111;
background: rgba(0, 0, 0, 0.8);
}
#megaMenu > ul.megaMenu > li.menu-item > .wpmega-nonlink > form#searchform.ubersearch-v2 input[type="text"] {
padding-right: 32px;
}
/* V1 */
#megaMenu > ul.megaMenu > li.menu-item > .wpmega-widgetarea > ul > li > form#searchform.ubersearch-v1 div {
padding-top: 7px;
}
#megaMenu > ul.megaMenu > li.menu-item > .wpmega-widgetarea > ul > li > form#searchform.ubersearch-v1 input[type="text"] {
width: 115px;
font-size: 12px;
border-width: 1px;
border-style: solid;
height: 16px;
float: left;
padding: 1px 3px;
border-radius: 2px 0px 0px 2px;
-moz-border-radius: 2px 0px 0px 2px;
-webkit-border-radius: 2px 0px 0px 2px;
line-height: 16px;
}
#megaMenu > ul.megaMenu > li.menu-item > .wpmega-widgetarea > ul > li > form#searchform.ubersearch-v1 input[type="submit"] {
width: 20px;
height: 20px;
background: #000;
border: 1px solid #000;
display: inline-block;
float: left;
cursor: pointer;
border-radius: 0px 2px 2px 0px;
-moz-border-radius: 0px 2px 2px 0px;
-webkit-border-radius: 0px 2px 2px 0px;
text-indent: -999em;
}
#megaMenu > ul.megaMenu > li.menu-item > .wpmega-nonlink > form#searchform.ubersearch-v1 {
margin: 2px 0 0 0;
padding: 0;
position: relative;
min-width: 160px;
}
#megaMenu > ul.megaMenu > li.menu-item > .wpmega-nonlink > form#searchform.ubersearch-v1 label {
display: none;
}
#megaMenu > ul.megaMenu > li.menu-item > .wpmega-nonlink > form#searchform.ubersearch-v1 input {
float: left;
}
#megaMenu > ul.megaMenu > li.menu-item > .wpmega-nonlink > form#searchform.ubersearch-v1 input[type="text"] {
width: 130px;
height: 27px;
margin: 0;
padding: 5px 6px 4px 6px;
border-right: none;
border-width: 1px;
box-sizing: border-box;
}
#megaMenu.megaMenuVertical > ul.megaMenu > li.menu-item > .wpmega-nonlink > form#searchform.ubersearch-v1 input[type="text"] {
margin-bottom: 5px;
}
#megaMenu > ul.megaMenu > li.menu-item > .wpmega-nonlink > form#searchform.ubersearch-v1 input[type="submit"] {
position: relative;
margin: 0;
float: none;
box-sizing: border-box;
background: #eee;
/* Old browsers */
background: #eeeeee -moz-linear-gradient(top, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%);
/* FF3.6+ */
background: #eeeeee -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0.2)), color-stop(100%, rgba(0, 0, 0, 0.2)));
/* Chrome,Safari4+ */
background: #eeeeee -webkit-linear-gradient(top, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%);
/* Chrome10+,Safari5.1+ */
background: #eeeeee -o-linear-gradient(top, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%);
/* Opera11.10+ */
background: #eeeeee -ms-linear-gradient(top, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%);
/* IE10+ */
background: #eeeeee linear-gradient(top, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%);
/* W3C */
border: 1px solid #aaa;
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
padding: 2px 8px;
color: #444;
display: inline-block;
font-size: 10px;
font-weight: bold;
text-decoration: none;
text-shadow: 0 1px rgba(255, 255, 255, 0.75);
cursor: pointer;
line-height: 21px;
font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
margin-left: -1px;
min-height: 27px;
min-height: 20px\9;
/* Seriously, IE? */
}
#megaMenu > ul.megaMenu > li.menu-item > .wpmega-nonlink > form#searchform.ubersearch-v1 input[type="submit"]:hover {
color: #222;
background: #ddd;
/* Old browsers */
background: #dddddd -moz-linear-gradient(top, rgba(255, 255, 255, 0.3) 0%, rgba(0, 0, 0, 0.3) 100%);
/* FF3.6+ */
background: #dddddd -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0.3)), color-stop(100%, rgba(0, 0, 0, 0.3)));
/* Chrome,Safari4+ */
background: #dddddd -webkit-linear-gradient(top, rgba(255, 255, 255, 0.3) 0%, rgba(0, 0, 0, 0.3) 100%);
/* Chrome10+,Safari5.1+ */
background: #dddddd -o-linear-gradient(top, rgba(255, 255, 255, 0.3) 0%, rgba(0, 0, 0, 0.3) 100%);
/* Opera11.10+ */
background: #dddddd -ms-linear-gradient(top, rgba(255, 255, 255, 0.3) 0%, rgba(0, 0, 0, 0.3) 100%);
/* IE10+ */
background: #dddddd linear-gradient(top, rgba(255, 255, 255, 0.3) 0%, rgba(0, 0, 0, 0.3) 100%);
/* W3C */
border: 1px solid #888;
border-top: 1px solid #aaa;
}
/* ========================================== */
/* RECENT POSTS STYLES */
/* ========================================== */
/* Recent Posts */
#megaMenu ul li.menu-item.ss-nav-menu-mega ul.sub-menu li.menu-item ul.wpmega-postlist {
margin-left: 0;
list-style: none;
}
#megaMenu ul li.menu-item.ss-nav-menu-mega ul.sub-menu li.menu-item ul.wpmega-postlist li {
margin-bottom: .5em;
clear: both;
padding-top: .5em;
}
#megaMenu ul li.menu-item.ss-nav-menu-mega ul.sub-menu li.menu-item ul.wpmega-postlist img {
float: left;
/*padding:4px;
background:rgba( 255,255,255, .2 );
border:1px solid #e9e9e9;*/
}
#megaMenu ul li.menu-item.ss-nav-menu-mega ul.sub-menu li.menu-item ul.wpmega-postlist-w-img div.wpmega-postlist-title,
#megaMenu ul li.menu-item.ss-nav-menu-mega ul.sub-menu li.menu-item ul.wpmega-postlist-w-img div.wpmega-postlist-content {
padding-left: 60px;
color: inherit;
}
#megaMenu ul li.menu-item.ss-nav-menu-mega ul.sub-menu li.menu-item ul.wpmega-postlist div.wpmega-postlist-title a {
padding: 0px 0px;
font-size: 13px;
text-decoration: none;
}
/* ========================================== */
/* CONTACT FORM 7 STYLES */
/* ========================================== */
.wpmega-nonlink div.wpcf7 form {
margin-bottom: 0;
}
.wpmega-nonlink div.wpcf7 p {
margin-bottom: .1em;
clear: both;
}
.wpmega-nonlink div.wpcf7 label {
width: 50px;
float: left;
padding-top: .4em;
color: inherit;
}
.wpmega-nonlink div.wpcf7 span {
position: relative;
}
.wpmega-nonlink div.wpcf7 input[type="text"],
.wpmega-nonlink div.wpcf7 input[type="email"],
.wpmega-nonlink div.wpcf7 textarea {
/*width:255px;*/
width: 95%;
padding: .4em;
border: 1px solid #dfdfdf;
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
font-family: inherit;
max-height: 100px;
font-size: 12px;
margin-top: .1em;
margin-bottom: .1em;
position: relative;
float: left;
}
.wpmega-nonlink div.wpcf7 input[type="text"]:focus,
.wpmega-nonlink div.wpcf7 input[type="text"]:hover,
.wpmega-nonlink div.wpcf7 textarea:focus,
.wpmega-nonlink div.wpcf7 textarea:hover {
background: #fcfcfc;
}
.wpmega-nonlink div.wpcf7 input.wpcf7-submit {
font-size: 12px;
clear: both;
border-width: 1px;
margin: 5px 0;
}
.wpcf7-form-control-wrap span.wpcf7-not-valid-tip {
position: absolute;
top: -9px;
left: 0px;
padding: 9px 6px;
width: 95%;
font-size: 12px;
}
.wpcf7-form div.wpcf7-response-output {
width: 93%;
}
/* ========================================== */
/* CLEARFIX STYLES */
/* ========================================== */
/* Clearfix */
.uberClearfix:before,
.uberClearfix:after,
#megaMenu.megaClear ul.megaMenu:before,
#megaMenu.megaClear ul.megaMenu:after {
content: "";
display: table;
}
.uberClearfix:after,
#megaMenu.megaClear ul.megaMenu:after {
clear: both;
}
.uberClearfix,
#megaMenu.megaClear ul.megaMenu {
zoom: 1;
/* For IE 6/7 (trigger hasLayout) */
}
/* ========================================== */
/* RESPONSIVE STYLES */
/* ========================================== */
/* Toggle */
#megaMenu #megaMenuToggle {
display: none;
padding: 12px 15px;
cursor: pointer;
font-size: 10px;
text-transform: uppercase;
text-align: left;
}
#megaMenu #megaMenuToggle .megaMenuToggle-icon {
display: inline-block;
background: #999;
background: rgba(230, 230, 230, 0.7);
height: 2px;
width: 16px;
position: relative;
float: right;
margin-top: 10px;
text-align: left;
}
#megaMenu #megaMenuToggle .megaMenuToggle-icon:before {
content: '';
position: absolute;
background: #999;
background: rgba(230, 230, 230, 0.8);
height: 2px;
width: 16px;
top: -4px;
}
#megaMenu #megaMenuToggle .megaMenuToggle-icon:after {
content: '';
position: absolute;
background: #999;
background: rgba(230, 230, 230, 0.9);
height: 2px;
width: 16px;
top: -8px;
}
/* #Tablet (Landscape) - 960px
================================================== */
@media only screen and (max-width: 960px) {
/* Vertical */
#megaMenu.megaResponsive.megaMenuVertical ul.megaMenu li.menu-item.ss-nav-menu-item-depth-0 ul.sub-menu-1 {
max-width: 767px;
left: 0px;
top: auto !important;
}
#megaMenu.megaResponsive.megaMenuVertical ul.megaMenu li.menu-item.ss-nav-menu-reg.ss-nav-menu-item-depth-0 ul.sub-menu-1 ul.sub-menu {
left: 0;
top: 100%;
}
}
/* #Mobile through Tablet (Portrait) - 767px
================================================== */
@media only screen and (max-width: 959px) {
#megaMenu.megaResponsive ul.megaMenu > li.menu-item {
width: 100%;
}
#megaMenu.megaResponsive ul.megaMenu li.menu-item .ss-colgroup > .ss-col,
#megaMenu.megaResponsive ul.megaMenu li.menu-item.ss-nav-menu-mega ul.sub-menu.sub-menu-1 > li.menu-item,
#megaMenu.megaResponsive ul.megaMenu li.menu-item.ss-nav-menu-mega ul.sub-menu.sub-menu-1 > li.menu-item.ss-sidebar > .wpmega-nonlink > ul > li.widget {
width: 80%;
padding-left: 10%;
padding-right: 10%;
max-width: none;
}
#megaMenu.megaResponsive ul.megaMenu li.menu-item.ss-nav-menu-mega ul.sub-menu.sub-menu-1 > li.menu-item.ss-nav-menu-item-depth-1.fullWidthRow,
#megaMenu.megaResponsive ul.megaMenu li.menu-item.ss-nav-menu-mega ul.sub-menu.sub-menu-1 > li.menu-item.ss-nav-menu-item-depth-1.ss-sidebar {
padding-left: 0;
padding-right: 0;
width: 100%;
}
#megaMenu.megaResponsive ul.megaMenu li.menu-item .ss-colgroup > .ss-col {
margin-bottom: 1em;
}
#megaMenu ul.megaMenu > li.menu-item > .wpmega-nonlink > form#searchform.ubersearch-v2 .ubersearch input[type="text"] {
width: 100%;
margin-bottom: 5px;
}
/* Remove box shadow and border on menu items, since we're probably wrapping at this poing */
#megaMenu.megaResponsive.megaMenuHorizontal ul.megaMenu > li.menu-item > a,
#megaMenu.megaResponsive.megaMenuHorizontal ul.megaMenu > li.menu-item > span.um-anchoremulator,
#megaMenu.megaResponsive ul.megaMenu > li.menu-item:hover > a,
#megaMenu.megaResponsive ul.megaMenu > li.menu-item > a:hover,
#megaMenu.megaResponsive ul.megaMenu > li.menu-item.megaHover > a {
box-shadow: none;
border-left: none;
}
/* No need to float right */
#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-mega-floatRight {
float: left;
}
/* Vertical */
#megaMenu.megaResponsive.megaMenuVertical ul.megaMenu > li.menu-item {
width: 100%;
}
#megaMenu.megaResponsive.megaMenuVertical ul.megaMenu li.menu-item.ss-nav-menu-mega.ss-nav-menu-item-depth-0 ul.sub-menu-1 {
max-width: 420px;
}
/* Flyout Menus */
#megaMenu.megaResponsive ul.megaMenu li.menu-item.ss-nav-menu-reg {
position: static;
}
#megaMenu.megaResponsive ul.megaMenu li.menu-item.ss-nav-menu-reg ul.sub-menu,
#megaMenu.megaResponsive ul.megaMenu li.menu-item.ss-nav-menu-reg ul.sub-menu li.menu-item ul.sub-menu {
left: -1px;
width: 100%;
box-shadow: none !important;
border-top-left-radius: 0 !important;
border-top-right-radius: 0 !important;
}
#megaMenu.megaResponsive ul.megaMenu li.menu-item.ss-nav-menu-reg ul.sub-menu li.menu-item ul.sub-menu {
top: 100%;
}
#megaMenu.megaResponsive ul.megaMenu li.menu-item.ss-nav-menu-reg ul.sub-menu > li.menu-item > a:after,
#megaMenu.megaResponsive ul.megaMenu li.menu-item.ss-nav-menu-reg ul.sub-menu > li.menu-item > span.um-anchoremulator:after {
border-color: #ddd transparent transparent transparent;
border-width: 3px 3px 0px;
border-style: solid dashed dashed;
right: 10px;
padding-top: 0;
padding-right: 2px;
margin-top: -3px;
}
/* Mega Menus */
#megaMenu.megaResponsive ul.megaMenu li.menu-item.ss-nav-menu-mega ul.sub-menu.sub-menu-1 {
left: -1px !important;
width: 100%;
box-sizing: content-box;
/*box-sizing:border-box;*/
box-shadow: none !important;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
#megaMenu #megaMenuToggle {
display: block;
}
#megaMenu.megaResponsiveToggle ul.megaMenu {
display: none;
}
/* Vertical */
#megaMenu.megaMenuVertical.megaFullWidth {
width: 100%;
}
/* Make centered Items align properly when stacked */
#megaMenu.megaCenterMenuItems ul.megaMenu > li.menu-item {
float: left;
}
}
/* #Mobile (Landscape) - 480px - 767px
================================================== */
/* Note: Design for a width of 480px */
@media only screen and (min-width: 480px) and (max-width: 959px) {
#megaMenu.megaResponsive ul.megaMenu > li.menu-item {
width: 50%;
}
#megaMenu.megaResponsive ul.megaMenu li.menu-item.ss-nav-menu-mega ul.sub-menu.sub-menu-1 > li.menu-item {
width: 38%;
padding-left: 6%;
padding-right: 6%;
max-width: none;
}
#megaMenu.megaResponsive ul.megaMenu li.menu-item.ss-nav-menu-mega ul.sub-menu.sub-menu-1 > li.menu-item.ss-sidebar > .wpmega-nonlink > ul > li.widget {
width: 88%;
padding-left: 6%;
padding-right: 6%;
max-width: none;
}
}
@media only screen and (max-width: 479px) {
/* Vertical */
#megaMenu.megaResponsive.megaMenuVertical ul.megaMenu li.menu-item.ss-nav-menu-mega.ss-nav-menu-item-depth-0 ul.sub-menu-1 {
max-width: 300px;
}
}
@media (min-width: 960px) {
#megaMenu.megaResponsiveToggle ul.megaMenu {
display: block !important;
}
#megaMenu ul.megaMenu a span.uber-close,
#megaMenu ul.megaMenu span.um-anchoremulator span.uber-close {
right: -12px !important;
z-index: 700;
}
}
/* Close Button */
#megaMenu ul.megaMenu li.menu-item a span.uber-close,
#megaMenu ul.megaMenu li.menu-item span.um-anchoremulator span.uber-close {
position: absolute;
box-sizing: border-box;
text-decoration: none;
top: 0;
right: 0;
height: 100%;
width: 30px;
text-align: center;
line-height: 40px;
background: #999;
background: rgba(0, 0, 0, 0.9);
z-index: 700;
font-size: 20px;
font-weight: bold;
color: #f5f5f5;
display: none;
}
#megaMenu ul.megaMenu a:hover span.uber-close,
#megaMenu ul.megaMenu span.um-anchoremulator:hover span.uber-close,
#megaMenu ul.megaMenu li.menu-item.megaHover a span.uber-close,
#megaMenu ul.megaMenu li.menu-item.megaHover span.um-anchoremulator span.uber-close {
display: block;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.