@media all and (min-width: 768px) {
.storm-default-menu li{
position:relative;
}
/* Shared appearance for every dropdown level. Positioning
(left/transform/text-align/overflow) used to live in here too, applied
identically to level-2 AND level-3 since both carry .dropdown-menu.
That's what was breaking level-3 -- see the level-1/level-2 rules
below, which now own positioning per level instead. */
ul.dropdown-menu {
border-radius:0;
border: 1.5px solid #05417d;
text-align: center;
padding:0px;
width:auto;
}
/* LEVEL-1 -> LEVEL-2: dropdown centered under its parent nav item.
This is the behavior that was already working, kept as-is. */
.storm-default-menu li.level-1 > ul.dropdown-menu {
left: 50%;
transform: translate(-50%);
/* overflow:hidden here would clip a level-3 flyout nested inside one
of this dropdown's s -- an ancestor's overflow:hidden clips
descendants regardless of which nested ancestor they're actually
positioned relative to. Visible so level-3 can escape this box. */
overflow: visible;
}
/* LEVEL-2 -> LEVEL-3: flyout beside its parent item, not centered below
it. Without this, level-3 inherited the level-1/level-2 centering
above (transform: translate(-50%) applies regardless of which `left`
value wins, since it's a different property) and got recentered out
from under itself. */
.storm-default-menu li.level-2 > ul.dropdown-menu {
top: 0;
left: 100%;
transform: none;
text-align: left;
}
/* LEVEL-2 ITEMS WITH A LEVEL-3 SUBMENU: indicator arrow.
The generated markup puts an empty a.dropdown-toggle immediately
before the real a.nav-link for any level-2 item that has children.
Left in normal flow, the two anchors just stack as separate
inline-block links -- an empty, independently-hoverable link first,
then the label -- with no indicator that a submenu exists.
Rather than reflowing the row with display:flex (order/flex-basis
interacting with the anchors' own width:100% from the theme file was
producing inconsistent sizing), the empty toggle anchor is taken out
of flow entirely with position:absolute and pinned to the right edge
of its parent . `.storm-default-menu li { position:relative; }`
above already makes li.level-2.submenu-wrapper the positioning
anchor, so no extra positioning context is needed. The real
a.nav-link is left completely alone -- still full-width, unaffected
by any of this -- so nothing about its own layout can go
unpredictable. pointer-events:none keeps the arrow out of
hit-testing so hovering that corner still hovers the itself
(and therefore the .submenu-wrapper:hover rule below) rather than
creating a dead zone. Color is intentionally not set here -- the
arrow inherits/receives color from the theme file, same as the label
text, so branding stays out of this default file. */
.storm-default-menu li.level-2.submenu-wrapper > a.dropdown-toggle {
position: absolute;
top: 50%;
right: 0;
transform: translate(-10px, -50%);
padding: 0;
pointer-events: none;
}
/* Reserves room so a long label's text doesn't run under the arrow --
only the right side is touched; top/bottom/left padding still come
from the theme file's own rule for this anchor. */
.storm-default-menu li.level-2.submenu-wrapper > a.nav-link:not(.dropdown-toggle) {
padding-right: 28px;
}
.storm-default-menu li.level-2.submenu-wrapper > a.dropdown-toggle::after {
display: inline-block;
border: none;
content: "\f105";
font-family: "Font Awesome 5 Free";
font-weight: 900;
font-size: 12px;
vertical-align: middle;
margin: 0;
}
/* just give a default */
ul.dropdown-menu li a:hover {
color:black;
}
.storm-default-menu ul li.submenu-wrapper:hover > ul.dropdown-menu {
visibility: visible;
display:block;
opacity:1;
}
/* HOVER SUPPORT
The old `.nav-item:hover .dropdown-menu` rule (no direct-child
combinator, removed here) matched ANY .dropdown-menu descendant of a
hovered .nav-item -- including a level-3 flyout nested two levels
down inside it. That meant hovering the top-level item alone (e.g.
"Services") could reveal a level-3 flyout before its own level-2 row
was ever hovered -- multiple flyouts open at once, in the wrong
place. The submenu-wrapper rule above already handles reveal at every
level correctly via its `>` direct-child combinator: each level only
opens when ITS OWN immediate parent is hovered, so a level-3
flyout can't appear until its specific level-2 row is hovered. */
.storm-default-menu .nav-item .dropdown-menu{ display: none; }
.storm-default-menu .nav-item .dropdown-menu{ margin-top:0; }
/* Centers using the magic flex*/
.storm-default-menu {
flex-flow: column !important;
}
/* Some default padding */
.storm-default-menu ul>li a {
padding-left:5px;
padding-right:5px;
}
}
@media (max-width:767.98px) {
.storm-default-menu .dropdown-menu {
padding-top:0px;
padding-bottom:0px;
margin-bottom:0px;
margin-top:0px;
transition: all 0.5s ease-in-out;
top: 100%;
width: 100%;
height:0px;
z-index: -1;
overflow-y: hidden;
display: block !important;
background-color:inherit;
border:none;
}
#menu .nav-item .dropdown-toggle::after {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f0d7";
padding-right:5px;
border: none;
vertical-align: initial;
}
#menu .nav-item .dropdown-toggle.collapsed::after {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f0da";
padding-right:5px;
border: none;
vertical-align: initial;
}
.menu-wrapper .dropdown-menu.collapse:not(.show) {
display: none;
}
.storm-default-menu .dropdown-menu > li {
padding-left:15px;
}
/* Level-3 items get an extra indent on top of level-2's, so the mobile
accordion visually reflects the hierarchy instead of both levels
sitting at the same indent. Optional polish, not required for
function -- remove if you'd rather keep every nested level flush. */
.storm-default-menu .dropdown-menu .dropdown-menu > li {
padding-left:30px;
}
.storm-default-menu .dropdown-menu.collapse.show {
height:auto;
}
.storm-default-menu .dropdown-menu.collapse:not(.show) {
height:0px !important;
}
}
.navbar-toggler {
margin-left:auto;
}
.menu-wrapper .nav-link.dropdown-toggle {
width:auto;
}