&.ubermenu{ display:block !important; } &.ubermenu-responsive .ubermenu-item.ubermenu-hide-desktop{ display:none !important; } &.ubermenu-responsive.ubermenu-retractors-responsive .ubermenu-retractor-mobile{ display:none; } /* Top level items full height */ &.ubermenu.ubermenu-horizontal.ubermenu-items-vstretch .ubermenu-nav{ display:flex; align-items:stretch; } &.ubermenu.ubermenu-horizontal.ubermenu-items-vstretch .ubermenu-item.ubermenu-item-level-0{ display:flex; flex-direction:column; } &.ubermenu.ubermenu-horizontal.ubermenu-items-vstretch .ubermenu-item.ubermenu-item-level-0 > .ubermenu-target{ flex:1; display:flex; align-items:center; flex-wrap:wrap; } &.ubermenu.ubermenu-horizontal.ubermenu-items-vstretch .ubermenu-item.ubermenu-item-level-0 > .ubermenu-target > .ubermenu-target-divider{ position:static; flex-basis:100%; } &.ubermenu.ubermenu-horizontal.ubermenu-items-vstretch .ubermenu-item.ubermenu-item-level-0 > .ubermenu-target.ubermenu-item-layout-image_left > .ubermenu-target-text{ padding-left:1em; } &.ubermenu.ubermenu-horizontal.ubermenu-items-vstretch .ubermenu-item.ubermenu-item-level-0 > .ubermenu-target.ubermenu-item-layout-image_right > .ubermenu-target-text{ padding-right:1em; } &.ubermenu.ubermenu-horizontal.ubermenu-items-vstretch .ubermenu-item.ubermenu-item-level-0 > .ubermenu-target.ubermenu-item-layout-image_above, &.ubermenu.ubermenu-horizontal.ubermenu-items-vstretch .ubermenu-item.ubermenu-item-level-0 > .ubermenu-target.ubermenu-item-layout-image_below{ flex-direction:column; } &.ubermenu.ubermenu-horizontal.ubermenu-items-vstretch .ubermenu-item.ubermenu-item-level-0 > .ubermenu-submenu-drop{ top:100%; } &.ubermenu.ubermenu-horizontal.ubermenu-items-vstretch .ubermenu-item-level-0:not(.ubermenu-align-right) + .ubermenu-item.ubermenu-align-right{ margin-left:auto; } &.ubermenu.ubermenu-horizontal.ubermenu-items-vstretch .ubermenu-item.ubermenu-item-level-0 > .ubermenu-target.ubermenu-content-align-left{ justify-content:flex-start; } &.ubermenu.ubermenu-horizontal.ubermenu-items-vstretch .ubermenu-item.ubermenu-item-level-0 > .ubermenu-target.ubermenu-content-align-center{ justify-content:center; } &.ubermenu.ubermenu-horizontal.ubermenu-items-vstretch .ubermenu-item.ubermenu-item-level-0 > .ubermenu-target.ubermenu-content-align-right{ justify-content:flex-end; } /* Force current submenu always open but below others */ &.ubermenu-force-current-submenu .ubermenu-item-level-0.ubermenu-current-menu-item > .ubermenu-submenu-drop, &.ubermenu-force-current-submenu .ubermenu-item-level-0.ubermenu-current-menu-ancestor > .ubermenu-submenu-drop { display: block!important; opacity: 1!important; visibility: visible!important; margin: 0!important; top: auto!important; height: auto; z-index:19; } /* Invert Horizontal menu to make subs go up */ &.ubermenu-invert.ubermenu-horizontal .ubermenu-item-level-0 > .ubermenu-submenu-drop, &.ubermenu-invert.ubermenu-horizontal.ubermenu-items-vstretch .ubermenu-item.ubermenu-item-level-0>.ubermenu-submenu-drop{ top:auto; bottom:100%; } &.ubermenu-invert.ubermenu-horizontal.ubermenu-sub-indicators .ubermenu-item-level-0.ubermenu-has-submenu-drop > .ubermenu-target > .ubermenu-sub-indicator{ transform:rotate(180deg); } /* Make second level flyouts fly up */ &.ubermenu-invert.ubermenu-horizontal .ubermenu-submenu .ubermenu-item.ubermenu-active > .ubermenu-submenu-type-flyout{ top:auto; bottom:0; } /* Clip the submenus properly when inverted */ &.ubermenu-invert.ubermenu-horizontal .ubermenu-item-level-0 > .ubermenu-submenu-drop{ clip: rect(-5000px,5000px,auto,-5000px); } /* Invert Vertical menu to make subs go left */ &.ubermenu-invert.ubermenu-vertical .ubermenu-item-level-0 > .ubermenu-submenu-drop{ right:100%; left:auto; } &.ubermenu-invert.ubermenu-vertical.ubermenu-sub-indicators .ubermenu-item-level-0.ubermenu-item-has-children > .ubermenu-target > .ubermenu-sub-indicator{ right:auto; left:10px; transform:rotate(90deg); } &.ubermenu-vertical.ubermenu-invert .ubermenu-item > .ubermenu-submenu-drop { clip: rect(-5000px,5000px,5000px,-5000px); } /* Vertical Flyout > Flyout */ &.ubermenu-vertical.ubermenu-invert.ubermenu-sub-indicators .ubermenu-has-submenu-drop > .ubermenu-target{ padding-left:25px; } &.ubermenu-vertical.ubermenu-invert .ubermenu-item > .ubermenu-target > .ubermenu-sub-indicator { right:auto; left:10px; transform:rotate(90deg); } &.ubermenu-vertical.ubermenu-invert .ubermenu-item > .ubermenu-submenu-drop.ubermenu-submenu-type-flyout, &.ubermenu-vertical.ubermenu-invert .ubermenu-submenu-type-flyout > .ubermenu-item > .ubermenu-submenu-drop { right: 100%; left: auto; }