/* ============================================================ * WASPA Portal -- Navbar Megamenu v2.0 (hover-driven, 3-tier) * -- Jeff Brown * 2026-06-28 * * Standalone stylesheet. MUST be enqueued LAST in header.php, * after bootstrap.css, style.css, /theme/style.css AND /style.css. * If any theme sheet loads after this one it will override the * navbar. Recommended order (megamenu.css dead last): * * bootstrap.css * style.css * font-awesome.css * /theme/style.css * /style.css * megamenu.css?v= * * As a belt-and-braces measure the navbar-critical rules below * carry !important so they hold even if sheet order regresses. * * THREE TIERS: * Phone (<=767px) : hamburger; full-width stacked panel * below the navbar; tap-to-expand * accordion submenus. (The good mobile UX.) * Tablet (768px - 991px) : horizontal hover bar, DENSER -- smaller * font, tighter padding so all groups fit. * Desktop (>=992px) : horizontal hover bar, roomy spacing. * * Dropdowns are pure CSS (:hover / :focus-within). No dependency on * bootstrap.min.js dropdown plugin. The hamburger uses BS3's working * collapse plugin. bootstrap.css is never edited. * ============================================================ */ /* ============================================================ * SECTION 0 -- Neutralise conflicting theme rules (forced) * style.css pins navbar height, floats, and the fixed mobile panel. * These reset them with !important so the megamenu controls layout * regardless of stylesheet load order. * ============================================================ */ .navbar.navbar-inverse { height: auto !important; max-height: none !important; min-height: 44px; } .navbar-inverse .navbar-nav { margin-top: 0 !important; } /* ============================================================ * SECTION 1 -- Collapse breakpoint logic * Phone collapses (<=767px); tablet & desktop expand (>=768px). * ============================================================ */ /* 1a. PHONE (<=767px): collapsed navbar, panel below the bar. */ @media (max-width: 767px) { .navbar-inverse .navbar-toggle { display: block !important; } .navbar-inverse .navbar-header { float: none !important; } /* Override style.css position:fixed; width:40%; float:right. Force normal flow, full width, below the bar. */ .navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form { position: static !important; float: none !important; width: 100% !important; margin-top: 0 !important; max-height: 80vh; overflow-y: auto; background: linear-gradient(to bottom, #f9b233, #ee8806); border-top: 1px solid rgba(255, 255, 255, 0.25); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1); } .navbar-inverse .navbar-collapse.collapse { display: none !important; } .navbar-inverse .navbar-collapse.collapse.in { display: block !important; height: auto !important; } .navbar-inverse .navbar-collapse.collapsing { display: block !important; overflow: hidden !important; } .navbar-inverse .navbar-nav { float: none !important; margin: 0 !important; } .navbar-inverse .navbar-nav > li { float: none !important; display: block !important; } .navbar-inverse .navbar-nav > li > a { padding-top: 11px; padding-bottom: 11px; border-bottom: 1px solid rgba(255, 255, 255, 0.12); } } /* 1b. TABLET + DESKTOP (>=768px): expanded horizontal bar. */ @media (min-width: 768px) { .navbar-inverse .navbar-toggle { display: none !important; } .navbar-inverse .navbar-header { float: left !important; } /* style.css right-floats these; force them back to normal */ .container > .navbar-header, .container-fluid > .navbar-header, .container > .navbar-collapse, .container-fluid > .navbar-collapse { float: none !important; } .navbar-inverse .navbar-collapse { width: auto !important; border-top: 0; box-shadow: none; } .navbar-inverse .navbar-collapse.collapse { display: block !important; height: auto !important; padding-bottom: 0; overflow: visible !important; } .navbar-inverse .navbar-nav { float: none !important; margin: 0 !important; text-align: right; } /* inline-block + text-align:right keeps the group right-aligned (like the original) while staying on a single row */ .navbar-inverse .navbar-nav > li { float: none !important; display: inline-block !important; } } /* ============================================================ * SECTION 2 -- Hover dropdowns (shared, >=768px) * Hide ALL menus; reveal on hover / focus only. This is what * stops every menu opening at once. !important so theme sheets * loading later cannot re-show them. * ============================================================ */ @media (min-width: 768px) { .navbar-inverse .navbar-nav .dropdown-menu { display: none !important; left: auto; right: 0; margin-top: 0; text-align: left; } .navbar-inverse .navbar-nav > li.dropdown:hover > .dropdown-menu, .navbar-inverse .navbar-nav > li.dropdown:focus-within > .dropdown-menu { display: block !important; } .navbar-inverse .navbar-nav > li.dropdown:hover > a, .navbar-inverse .navbar-nav > li.dropdown:focus-within > a { background-color: rgba(255, 255, 255, 0.18) !important; color: #fff !important; } .navbar-inverse .navbar-nav > li.dropdown > .dropdown-menu::before { content: ""; position: absolute; top: -8px; left: 0; right: 0; height: 8px; } } /* ============================================================ * SECTION 2a -- TABLET density (768px - 991px) * ============================================================ */ @media (min-width: 768px) and (max-width: 991px) { .navbar-inverse .navbar-nav > li > a { font-size: 11px; padding-left: 8px; padding-right: 8px; padding-top: 12px; padding-bottom: 12px; letter-spacing: 0; } .navbar-inverse .navbar-nav > li > a .fa { margin-right: 4px; } .navbar-inverse .navbar-nav > li > a .caret { display: none; } .navbar-inverse .navbar-nav .dropdown-menu { font-size: 11px; } .navbar-inverse .navbar-nav .dropdown-menu > li > a { padding: 6px 16px; } .navbar-inverse .navbar-nav .megamenu-item > .dropdown-menu { min-width: 380px; } .megamenu-col { padding: 0 14px; } .megamenu-col .mega-list li a { font-size: 11px; } } /* ============================================================ * SECTION 2b -- DESKTOP roominess (>=992px) * ============================================================ */ @media (min-width: 992px) { .navbar-inverse .navbar-nav > li > a { font-size: 12px; padding-top: 12px; padding-bottom: 12px; line-height: 20px; letter-spacing: 0.5px; } } .navbar-inverse .navbar-nav > li > a .caret { border-top-color: rgba(255, 255, 255, 0.85); border-bottom-color: rgba(255, 255, 255, 0.85); } /* ============================================================ * SECTION 3 -- Dropdown menu styling (all viewports) * ============================================================ */ .navbar-inverse .navbar-nav .dropdown-menu { border: none; border-top: 3px solid #ee8806; border-radius: 0 0 4px 4px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15); padding: 6px 0; z-index: 100001; font-size: 12px; letter-spacing: 0.5px; background-color: #fff; } .navbar-inverse .navbar-nav .dropdown-menu > li > a { color: #333 !important; padding: 7px 20px; font-weight: 400; white-space: nowrap; } .navbar-inverse .navbar-nav .dropdown-menu > li > a .fa { color: #ee8806; margin-right: 8px; width: 14px; text-align: center; display: inline-block; } .navbar-inverse .navbar-nav .dropdown-menu > li > a:hover, .navbar-inverse .navbar-nav .dropdown-menu > li > a:focus { background-color: rgba(238, 136, 6, 0.12); color: #c97500 !important; } .navbar-inverse .navbar-nav .dropdown-menu > li > a:hover .fa, .navbar-inverse .navbar-nav .dropdown-menu > li > a:focus .fa { color: #c97500; } .navbar-inverse .navbar-nav .dropdown-menu .dropdown-header { color: #555; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; padding: 8px 20px 4px; } .navbar-inverse .navbar-nav .dropdown-menu .divider { background-color: #f0f0f0; margin: 5px 0; } /* ============================================================ * SECTION 4 -- Megamenu (two-column wide dropdown) * ============================================================ */ .navbar-inverse .navbar-nav .megamenu-item > .dropdown-menu { min-width: 460px; padding: 14px 0 12px; } .navbar-inverse .navbar-nav .megamenu-item > .dropdown-menu > li.megamenu-row { background: none !important; cursor: default; padding: 0; } .megamenu-cols { display: flex; flex-wrap: nowrap; } .megamenu-col { flex: 1; padding: 0 20px; border-right: 1px solid #f0f0f0; } .megamenu-col:last-child { border-right: none; } .megamenu-col .mega-heading { display: block; color: #555; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; padding-bottom: 6px; margin-bottom: 6px; border-bottom: 2px solid #f9b233; } .megamenu-col .mega-heading + .mega-list + .mega-heading { margin-top: 14px; } .megamenu-col .mega-list { list-style: none; padding: 0; margin: 0; } .megamenu-col .mega-list li a { display: block; padding: 5px 0; color: #333 !important; font-size: 12px; letter-spacing: 0.5px; text-decoration: none; white-space: nowrap; } .megamenu-col .mega-list li a .fa { color: #ee8806; margin-right: 8px; width: 14px; text-align: center; display: inline-block; } .megamenu-col .mega-list li a:hover { color: #c97500 !important; } .megamenu-col .mega-list li a:hover .fa { color: #c97500; } /* ============================================================ * SECTION 5 -- Phone (<=767px): inline accordion below the navbar * ============================================================ */ @media (max-width: 767px) { .navbar-inverse .navbar-nav .dropdown-menu { display: none !important; position: static !important; float: none !important; width: auto !important; background-color: rgba(0, 0, 0, 0.15); border: none; border-radius: 0; box-shadow: none; padding: 0; margin: 0; } .navbar-inverse .navbar-nav > li.dropdown:focus-within > .dropdown-menu { display: block !important; } .navbar-inverse .navbar-nav > li.dropdown:focus-within > a { background-color: rgba(255, 255, 255, 0.18) !important; color: #fff !important; } .navbar-inverse .navbar-nav .dropdown-menu > li > a, .navbar-inverse .navbar-nav .dropdown-menu .dropdown-header { color: #fff !important; padding: 9px 30px !important; border-bottom: none !important; } .navbar-inverse .navbar-nav .dropdown-menu .dropdown-header { color: rgba(255, 255, 255, 0.7) !important; } .navbar-inverse .navbar-nav .dropdown-menu > li > a .fa { color: rgba(255, 255, 255, 0.8); } .navbar-inverse .navbar-nav .dropdown-menu > li > a:hover, .navbar-inverse .navbar-nav .dropdown-menu > li > a:focus { background-color: rgba(0, 0, 0, 0.2); color: #fff !important; } .navbar-inverse .navbar-nav .dropdown-menu > li > a:hover .fa { color: #fff; } .navbar-inverse .navbar-nav .dropdown-menu .divider { background-color: rgba(255, 255, 255, 0.15); } .navbar-inverse .navbar-nav .megamenu-item > .dropdown-menu { min-width: auto; padding: 0; } .megamenu-cols { flex-direction: column; } .megamenu-col { flex: none; border-right: none; border-bottom: 1px solid rgba(255, 255, 255, 0.15); padding: 8px 30px; } .megamenu-col .mega-heading { color: rgba(255, 255, 255, 0.7); border-bottom-color: rgba(255, 255, 255, 0.25); } .megamenu-col .mega-list li a { color: #fff !important; padding: 7px 0; } .megamenu-col .mega-list li a .fa { color: rgba(255, 255, 255, 0.8); } .megamenu-col .mega-list li a:hover { color: #fff !important; } } /* ============================================================ * End of megamenu.css * ============================================================ */