https://purchasing.idaho.gov/wp-content/themes/Webmaster-v4/css/mega-menu.css?ver=6.9.4

/* ================================================================ MAX MEGA MENU — CUSTOM STYLING TAB Structure targeted: ul.mega-sub-menu[style*="--columns:12"] ← outer grid wrapper └─ li.mega-menu-column.mega-menu-columns-4-of-12 ← 3 equal columns └─ ul.mega-sub-menu ← inner list └─ li.mega-menu-item ← widget item ├─ h4.mega-block-title ← section heading └─ div.menu-*-container > ul > li ← nav links All text: white / rgba(255,255,255,x) ================================================================ */ /* ---------------------------------------------------------------- 1. OUTER GRID WRAPPER Force the 3-column grid on the that holds the columns. The plugin writes style="--columns:12" on this element. ---------------------------------------------------------------- */ ul.mega-sub-menu[style*="--columns:12"] { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; grid-auto-rows: auto !important; align-items: start !important; gap: 0 !important; /* dividers handle spacing */ width: 100% !important; padding: 0 !important; margin: 0 !important; list-style: none !important; box-sizing: border-box !important; /* reset any flex the plugin sets */ flex-direction: unset !important; flex-wrap: unset !important; } /* ---------------------------------------------------------------- 2. COLUMN ITEMS Each column is a inside the grid. ---------------------------------------------------------------- */ ul.mega-sub-menu[style*="--columns:12"] > li.mega-menu-column { display: block !important; float: none !important; width: auto !important; /* let grid control width */ max-width: none !important; min-width: 0 !important; /* prevent blowout */ padding: 1.75rem 1.5rem !important; box-sizing: border-box !important; /* vertical divider between columns */ } /* ---------------------------------------------------------------- 3. INNER SUB-MENU (one per column) Needs to be a plain vertical flex list — NOT inherit the outer grid. ---------------------------------------------------------------- */ ul.mega-sub-menu[style*="--columns:12"] > li.mega-menu-column > ul.mega-sub-menu { display: flex !important; flex-direction: column !important; grid-template-columns: unset !important; gap: 0 !important; padding: 0 !important; margin: 0 !important; list-style: none !important; width: 100% !important; background: transparent !important; box-shadow: none !important; border: none !important; } /* ---------------------------------------------------------------- 4. WIDGET ITEM wrapper (li.mega-menu-item inside each column) ---------------------------------------------------------------- */ ul.mega-sub-menu[style*="--columns:12"] .mega-menu-item > div > ul > li > a { display: block !important; width: 100% !important; padding: 0.35rem 0 !important; border-radius: 3px !important; box-sizing: border-box !important; white-space: normal !important; font-size: 18px !important; font-weight: 400 !important; line-height: 1.2 !important; color: rgba(255, 255, 255, 1) !important; text-decoration: none !important; transition: color 0.15s ease, padding-left 0.15s ease !important; } /* ---------------------------------------------------------------- 5. SECTION HEADINGS h4.mega-block-title ---------------------------------------------------------------- */ ul.mega-sub-menu[style*="--columns:12"] .mega-block-title { display: block !important; margin: 1rem 0 1rem 0 !important; padding: 0 0 0 0 !important; /* border-bottom: 1px solid rgba(255, 255, 255, 0.25) !important; */ font-size: 18px !important; font-weight: 700 !important; text-transform: none !important; color: var(--color7) !important; line-height: 1.2 !important; white-space: nowrap !important; } /* ---------------------------------------------------------------- 6. NAV CONTAINERS .menu-find-container etc. ---------------------------------------------------------------- */ .menu-find-container, .menu-do-container, .menu-learn-container { display: block !important; width: 100% !important; } .menu-find-container ul, .menu-do-container ul, .menu-learn-container ul { display: flex !important; flex-direction: column !important; grid-template-columns: unset !important; list-style: none !important; margin: 0 !important; padding: 0 !important; background: transparent !important; box-shadow: none !important; border: none !important; } /* ---------------------------------------------------------------- 7. INDIVIDUAL LIST ITEMS ---------------------------------------------------------------- */ .menu-find-container .menu-item, .menu-do-container .menu-item, .menu-learn-container .menu-item { display: block !important; float: none !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } /* ---------------------------------------------------------------- 8. LINKS — white text, subtle hover ---------------------------------------------------------------- */ ul.mega-sub-menu[style*="--columns:12"] .mega-menu-item > div > ul > li > a { display: block !important; width: 100% !important; padding: 0.35rem 0 !important; border-radius: 3px !important; box-sizing: border-box !important; white-space: normal !important; font-size: 18px !important; font-weight: 400 !important; line-height: 1.2 !important; color: rgba(255, 255, 255, 1) !important; text-decoration: none !important; transition: color 0.15s ease, padding-left 0.15s ease !important; } /* Hover / focus */ ul.mega-sub-menu[style*="--columns:12"] .mega-menu-item > div > ul > li > a:hover, ul.mega-sub-menu[style*="--columns:12"] .mega-menu-item > div > ul > li > a:focus-visible { color: var(--color3) !important; padding-left: 0 !important; outline: none !important; } /* Active / current page */ ul.mega-sub-menu[style*="--columns:12"] .mega-menu-item > div > ul > li > a[aria-current="page"] { color: var(--color3) !important; font-weight: 600 !important; } /* ================================================================ RESPONSIVE BREAKPOINTS ================================================================ */ /* Tablet (≤ 1024px) — 2 columns, last column spans full width */ @media (max-width: 1024px) { ul.mega-sub-menu[style*="--columns:12"] { grid-template-columns: repeat(2, 1fr) !important; } ul.mega-sub-menu[style*="--columns:12"] > li.mega-menu-column:first-child { /* border-right: 1px solid rgba(255, 255, 255, 0.12) !important; */ /* border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important; */ } ul.mega-sub-menu[style*="--columns:12"] > li.mega-menu-column:nth-child(2) { border-right: none !important; /* border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important; */ } ul.mega-sub-menu[style*="--columns:12"] > li.mega-menu-column:last-child { grid-column: 1 / -1 !important; border-right: none !important; border-bottom: none !important; } } /* Mobile (≤ 768px) — single column stack */ @media (max-width: 768px) { ul.mega-sub-menu[style*="--columns:12"] { grid-template-columns: 1fr !important; } ul.mega-sub-menu[style*="--columns:12"] > li.mega-menu-column { border-right: none !important; border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important; padding: 1.25rem 0rem !important; } ul.mega-sub-menu[style*="--columns:12"] > li.mega-menu-column:first-child { border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important; } ul.mega-sub-menu[style*="--columns:12"] > li.mega-menu-column:nth-child(2) { border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important; } ul.mega-sub-menu[style*="--columns:12"] > li.mega-menu-column:last-child { grid-column: auto !important; border-bottom: none !important; } .menu-find-container a, .menu-do-container a, .menu-learn-container a { font-size: 18px; !important; padding: 0.45rem 0rem !important; } #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu { background: var(--color8); width: 100vw; max-width: fit-content !important; opacity: 1 !important; } } /* Very small (≤ 480px) */ @media (max-width: 480px) { ul.mega-sub-menu[style*="--columns:12"] > li.mega-menu-column { padding: 1rem 0.75rem !important; } #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu { background: var(--color8); width: 100vw; max-width: fit-content !important; opacity: 1 !important; } } #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-row { width: 100%; } #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu { background: var(--color1); width: 100vw; max-width: 100vw; opacity: 1 !important; } .mega-sub-menu { opacity: 1 !important; } #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link { color: var(--color7); opacity: 1 !important; font-size: 16px; } .mega-sub-menu a:hover { color: var(--color3) !important; } #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link { font-size: 18px; }