/* ========================================================= NAVBAR ========================================================= */ .nv-navbar { position: sticky; top: 0; z-index: 1000; padding: 1.4rem 0; background: #fff; border-bottom: 1px solid var(--nv-border); transition: .3s ease; } .nv-navbar.scrolled { /* padding: .55rem 0; */ box-shadow: 0 10px 30px -20px rgba(6, 43, 74, .3); } /* ========================================================= LOGO ========================================================= */ .site-logo { max-width: 200px; } .nv-logo { font-family: 'Sora', sans-serif; font-weight: 800; font-size: 1.4rem; color: var(--nv-blue-900); display: flex; align-items: center; gap: .6rem; } .nv-logo .logo-badge { width: 40px; height: 40px; border-radius: 10px; background: var(--nv-blue); position: relative; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.1rem; font-weight: 800; box-shadow: 0 8px 18px -6px rgba(9, 97, 169, .55); } .nv-logo .logo-badge:after { content: ""; position: absolute; top: -6px; left: -6px; width: 12px; height: 12px; background: var(--nv-orange); border-radius: 0 100% 0 100%; } /* ========================================================= MAIN NAVIGATION — NORMAL MENU ========================================================= */ .nv-links{list-style:none;display:flex;margin:0;padding:0;align-items:center} .nv-links>li{position:relative} .nv-links>li>a{color:#2B3646;font-weight:600;font-size:.95rem;padding:.55rem .6rem;border-radius:8px;display:flex;align-items:center;gap:.35rem;transition:.25s;text-decoration:none} .nv-links>li>a:hover,.nv-links>li.open>a{color:var(--nv-blue);background:rgba(9,97,169,.07)} .nv-links .chev{font-size:.68rem;transition:transform .3s ease} .nv-links li.open>a .chev{transform:rotate(180deg)} .menu-item-has-children{position:relative} .primary-nav .sub-menu{position:absolute;top:calc(100% + 12px);left:0;min-width:270px;margin:0;padding:.6rem;list-style:none;background:#fff;border:1px solid var(--nv-border);border-radius:14px;box-shadow:var(--nv-shadow);opacity:0;visibility:hidden;transform:translateY(10px) scale(.98);transition:opacity .3s ease,transform .3s ease,visibility .3s ease;z-index:20} .primary-nav .nv-links>li.menu-item-has-children>.sub-menu::before{content:"";position:absolute;top:-6px;left:28px;width:12px;height:12px;background:#fff;border-left:1px solid var(--nv-border);border-top:1px solid var(--nv-border);transform:rotate(45deg)} .primary-nav .nv-links>li.menu-item-has-children.open>.sub-menu{opacity:1;visibility:visible;transform:translateY(0) scale(1)} .primary-nav .sub-menu a{display:flex;align-items:center;gap:.7rem;padding:.6rem .7rem;border-radius:10px;color:#2B3646;font-weight:500;font-size:.92rem;transition:.2s ease;text-decoration:none;justify-content:space-between} .primary-nav .sub-menu a:hover{background:var(--nv-cream);color:var(--nv-blue)} .primary-nav .sub-menu a i{transition:transform .3s ease} .primary-nav .sub-menu a:hover i{transform:rotate(180deg)} .primary-nav .sub-menu .sub-ico{width:34px;height:34px;flex:0 0 34px;border-radius:9px;background:rgba(9,97,169,.09);display:flex;align-items:center;justify-content:center;color:var(--nv-blue)} .primary-nav .sub-menu .price-tag{margin-left:auto;font-size:.72rem;font-weight:700;color:var(--nv-orange)} .primary-nav .sub-menu .menu-item-has-children{position:relative} .primary-nav .sub-menu .menu-item-has-children>.sub-menu{top:-1px;left:calc(100% + 1px);min-width:270px;margin:0;border-radius:0 14px 14px 14px;opacity:0;visibility:hidden;transform:translateX(8px) scale(.98);transition:opacity .25s ease,transform .25s ease,visibility .25s ease;z-index:30} .primary-nav .sub-menu .menu-item-has-children.open>.sub-menu{opacity:1;visibility:visible;transform:translateX(0) scale(1)} .primary-nav .sub-menu .menu-item-has-children>a .chev{display:none} .primary-nav .sub-menu .menu-item-has-children>.sub-menu::before{content:"";position:absolute;top:18px;left:-6px;width:12px;height:12px;background:#fff;border-left:1px solid var(--nv-border);border-bottom:1px solid var(--nv-border);transform:rotate(45deg)} .primary-nav .sub-menu .menu-item-has-children:hover>a{background:var(--nv-cream);color:var(--nv-blue);border-radius:0} .primary-nav .sub-menu .sub-menu>li>a{border-radius:0} .primary-nav .sub-menu .sub-menu>li>a:hover{background:var(--nv-cream);color:var(--nv-blue);border-radius:0} .primary-nav .sub-menu .sub-menu .menu-item-has-children>.sub-menu{top:-1px;left:calc(100% + 1px);transform:translateX(8px) scale(.98);z-index:40} .primary-nav .sub-menu .sub-menu .menu-item-has-children.open>.sub-menu{opacity:1;visibility:visible;transform:translateX(0) scale(1)} @media (min-width:992px){ .primary-nav .nv-links>li.menu-item-has-children:hover>.sub-menu{opacity:1;visibility:visible;transform:translateY(0) scale(1)} .primary-nav .sub-menu .menu-item-has-children:hover>.sub-menu{opacity:1;visibility:visible;transform:translateX(0) scale(1)} } /* ========================================================= MOBILE NAVIGATION — NORMAL SUBMENU + OFF-CANVAS ========================================================= */ @media (max-width:991px){ .nv-navbar { padding: 0.9rem 0; } .site-logo { max-width: 180px; } .nv-links{flex-direction:column;align-items:stretch} .primary-nav .sub-menu{position:static;width:100%;min-width:0;margin-top:.4rem;border-radius:10px;box-shadow:none;transform:none;display:none} .primary-nav .menu-item-has-children.open>.sub-menu{display:block;opacity:1;visibility:visible;transform:none} .primary-nav .sub-menu::before{display:none} .primary-nav .sub-menu .menu-item-has-children>.sub-menu{position:static;width:100%;margin:.3rem 0 0;padding-left:1rem;border-radius:10px;transform:none;box-shadow:none;display:none} .primary-nav .sub-menu .menu-item-has-children.open>.sub-menu{display:block;opacity:1;visibility:visible;transform:none} .primary-nav .sub-menu .menu-item-has-children>a::after{content:"›";display:block;margin-left:auto} .primary-nav .sub-menu .menu-item-has-children:hover>a{border-radius:10px} } @media(max-width:575.98px) { .site-logo { max-width: 150px; } } .nv-overlay{position:fixed;inset:0;background:rgba(6,43,74,.55);backdrop-filter:blur(2px);z-index:1040;opacity:0;visibility:hidden;transition:opacity .35s ease,visibility .35s ease} .nv-overlay.show{opacity:1;visibility:visible} .nv-mobile{position:fixed;top:0;right:0;width:min(340px,86vw);height:100%;background:#fff;z-index:1050;transform:translateX(100%);transition:transform .4s cubic-bezier(.22,.98,.35,1);display:flex;flex-direction:column;overflow:hidden;box-shadow:-20px 0 50px rgba(6,20,40,.25)} .nv-mobile.show{transform:translateX(0)} .nv-mobile-head{background:var(--nv-blue-900);padding:1rem 1.3rem;display:flex;align-items:center;justify-content:space-between;flex:0 0 auto} .nv-mobile-head .logo-badge img{height:60px!important;width:auto;display:block} .nv-mobile-close{width:38px;height:38px;border:none;border-radius:10px;background:rgba(255,255,255,.18);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer} .nv-mobile-body{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;padding:1.1rem;margin:0;list-style:none;-webkit-overflow-scrolling:touch;overscroll-behavior:contain} .nv-mobile-body::-webkit-scrollbar{width:5px} .nv-mobile-body::-webkit-scrollbar-thumb{background:var(--nv-border);border-radius:5px} .nv-mobile-body .menu-item{border-bottom:1px solid var(--nv-border);padding:0 .9rem } .nv-mobile-body .menu-item:last-of-type{border-bottom:none; } .nv-mobile-body .menu-item>a{display:flex;align-items:center;justify-content:space-between;gap:.8rem;padding:.95rem .2rem;font-weight:600;color:#1B2635;cursor:pointer;text-decoration:none} .nv-mobile-body .menu-item-has-children>a .has-child-icon{margin-left:auto;font-size:.8rem;color:var(--nv-gray);transition:transform .3s ease} .nv-mobile-body .menu-item-has-children.open>a .has-child-icon{transform:rotate(180deg)} .nv-mobile-body .sub-menu{max-height:0;overflow:hidden;transition:max-height .35s ease;margin:0;padding:0 0 0 2rem;list-style:none} .nv-mobile-body .menu-item-has-children.open>.sub-menu{max-height:1000px} .nv-mobile-body .menu-item-has-children.open{background:#f5f8fc;border-radius:8px} .nv-mobile-body .menu-item-has-children.open>a{color:#1B2635} .nv-mobile-body .menu-item-has-children.open>.sub-menu{background:#f5f8fc;padding-left:1rem;padding-right:.6rem} .nv-mobile-body .menu-item-has-children.open>.sub-menu .menu-item{padding: 0;} .nv-mobile-body .sub-menu a, .nv-mobile-body .sub-menu a span{ font-size: .86rem; color:#1B2635; font-weight: 650; line-height: 1.4; text-decoration: none; } .nv-mobile-body .sub-menu a:hover{color:var(--nv-orange)!important} .nv-mobile-body .sub-menu a{display:flex;align-items:center;padding:.6rem 0;color:var(--nv-gray);font-weight:500;font-size:.92rem;text-decoration:none} .nv-mobile-foot{flex:0 0 auto;padding:1.1rem;border-top:1px solid var(--nv-border);display:flex;gap:.6rem;background:#fff} .nv-mobile-foot .btn-nv-outline,.nv-mobile-foot .btn-nv-primary{flex:1;text-align:center;font-size:.9rem;padding:.7rem .5rem} @media(max-width:480px){ .nv-mobile{width:88vw} .nv-mobile-head{padding:.8rem 1rem} .nv-mobile-head .logo-badge img{height:40px!important} .nv-mobile-body{padding:0;margin:0} .nv-mobile-foot{padding:.8rem} } /* ========================================================= TECHNUVIA MEGA MENU FINAL REFERENCE DESIGN DESKTOP / LAPTOP ONLY ========================================================= REQUIRED VISUAL STRUCTURE: 4 GRID ┌──────────┬──────────┬──────────┬──────────┐ │ IMAGE │ IMAGE │ IMAGE │ IMAGE │ │ [ICON] │ [ICON] │ [ICON] │ [ICON] │ │ Title │ Title │ Title │ Title │ │ Desc │ Desc │ Desc │ Desc │ │ ─────── │ ─────── │ ─────── │ ─────── │ │ • Link > │ • Link > │ • Link > │ • Link > │ └──────────┴──────────┴──────────┴──────────┘ 3 GRID: Same card design, with the parent Mega image occupying the left featured area. IMPORTANT: The current PHP places .mega-menu-column-image, .mega-menu-column-text and description INSIDE .mega-menu-column-title. Therefore this CSS deliberately styles the anchor as the card header and does NOT use flex to put image beside title. ========================================================= */ /* ========================================================= DESKTOP ========================================================= */ @media (min-width: 992px) { /* ----------------------------------------------------- ROOT ----------------------------------------------------- */ .primary-nav .nv-links > li.mega-menu { position: static !important; } /* ----------------------------------------------------- PANEL ----------------------------------------------------- */ .primary-nav .nv-links > li.mega-menu > .mega-menu-panel { position: absolute !important; top: calc(100% + 8px) !important; left: 50% !important; width: min( 1180px, calc(100vw - 30px) ) !important; margin: 0 !important; padding: 0 !important; opacity: 0; visibility: hidden; pointer-events: none; transform: translate3d(-50%, 10px, 0); z-index: 99999; background: transparent !important; border: 0 !important; box-shadow: none !important; overflow-x: hidden !important; overflow-y: auto !important; max-height: calc(100vh - 105px); scrollbar-width: thin; scrollbar-color: rgba(23,35,51,.20) transparent; transition: opacity .22s ease, transform .22s ease, visibility .22s ease; } .primary-nav .nv-links > li.mega-menu > .mega-menu-panel::before { content: ""; position: absolute; top: -9px; left: 0; width: 100%; height: 9px; } .primary-nav .nv-links > li.mega-menu:hover > .mega-menu-panel, .primary-nav .nv-links > li.mega-menu.open > .mega-menu-panel { opacity: 1; visibility: visible; pointer-events: auto; transform: translate3d(-50%, 0, 0); } /* ----------------------------------------------------- 3PX SCROLLBAR ----------------------------------------------------- */ .primary-nav .nv-links > li.mega-menu > .mega-menu-panel::-webkit-scrollbar { width: 3px; height: 3px; } .primary-nav .nv-links > li.mega-menu > .mega-menu-panel::-webkit-scrollbar-track { background: transparent; } .primary-nav .nv-links > li.mega-menu > .mega-menu-panel::-webkit-scrollbar-thumb { background: rgba(23,35,51,.20); border-radius: 20px; } /* ----------------------------------------------------- WHITE OUTER PANEL ----------------------------------------------------- */ .primary-nav .mega-menu-inner { position: relative; display: flex !important; width: 100% !important; padding: 10px !important; background: #ffffff !important; border: 1px solid #e4ebf1 !important; border-radius: 18px !important; box-shadow: 0 20px 55px rgba(24,55,84,.16) !important; overflow: hidden !important; } /* ----------------------------------------------------- PARENT FEATURE IMAGE ----------------------------------------------------- */ .primary-nav .mega-menu-main-image { position: relative; flex: 0 0 245px !important; width: 245px !important; min-height: 390px !important; margin: 0 !important; overflow: hidden; border-radius: 13px; background: #f1f6fa; } .primary-nav .mega-menu-main-image img { display: block !important; width: 100% !important; height: 100% !important; min-height: 390px; object-fit: cover; } .primary-nav .mega-menu-main-image-overlay { position: absolute; left: 0; right: 0; bottom: 0; padding: 55px 20px 20px; background: linear-gradient( to top, rgba(9,38,65,.82), rgba(9,38,65,.18), transparent ); } .primary-nav .mega-menu-main-image-overlay strong { color: #ffffff; font-size: 1.05rem; font-weight: 750; } /* ----------------------------------------------------- CARD GRID ----------------------------------------------------- */ .primary-nav .mega-menu-columns { flex: 1 !important; min-width: 0 !important; display: grid !important; align-items: start !important; padding: 8px 6px !important; margin: 0 !important; gap: 0 !important; } /* 4 cards when no parent image */ .primary-nav .mega-menu-columns.mega-menu-grid-4 { grid-template-columns: repeat( 4, minmax(0, 1fr) ) !important; } /* 3 cards when parent image exists */ .primary-nav .mega-menu-columns.mega-menu-grid-3 { grid-template-columns: repeat( 3, minmax(0, 1fr) ) !important; } /* ----------------------------------------------------- CARD ----------------------------------------------------- */ .primary-nav .mega-menu-column { position: relative !important; display: block !important; width: auto !important; min-width: 0 !important; min-height: 258px; margin: 0 !important; padding: 0 12px 10px !important; background: #ffffff !important; border: 0 !important; border-radius: 0 !important; overflow: visible !important; } /* vertical separators */ .primary-nav .mega-menu-column + .mega-menu-column { border-left: 1px solid #dfe8ef !important; } /* horizontal separator between rows */ .primary-nav .mega-menu-columns .mega-menu-column:nth-child(n + 5) { padding-top: 12px !important; border-top: 1px solid #e3eaf0 !important; } /* For 3-grid: second row starts at item 4 */ .primary-nav .mega-menu-columns.mega-menu-grid-3 .mega-menu-column:nth-child(n + 4) { padding-top: 12px !important; border-top: 1px solid #e3eaf0 !important; } /* ----------------------------------------------------- SOFT CORNER DECORATION ----------------------------------------------------- */ .primary-nav .mega-menu-column::after { content: ""; position: absolute; right: 0; bottom: 0; width: 74px; height: 74px; border-radius: 50% 0 0 0; background: rgba(9,97,169,.045); pointer-events: none; z-index: 0; } /* ----------------------------------------------------- CARD HEADER ANCHOR ----------------------------------------------------- THIS IS THE IMPORTANT FIX. Your HTML is:
...
... ... We therefore force it to be a block card header. ----------------------------------------------------- */ .primary-nav .mega-menu-column > a.mega-menu-column-title { position: relative !important; display: block !important; width: 100% !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 0 8px !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; color: #123f73 !important; text-decoration: none !important; cursor: pointer; overflow: visible !important; } /* ----------------------------------------------------- IMAGE — FULL CARD WIDTH ----------------------------------------------------- */ .primary-nav .mega-menu-column > a.mega-menu-column-title > .mega-menu-column-image { position: relative !important; display: block !important; width: 100% !important; height: 85px !important; margin: 0 0 0 !important; padding: 0 !important; overflow: hidden !important; background: #eef4f8 !important; border-radius: 8px !important; box-sizing: border-box !important; text-decoration: none; z-index: 1; } .primary-nav .mega-menu-column > a.mega-menu-column-title > .mega-menu-column-image img { display: block !important; width: 100% !important; height: 100% !important; min-height: 0 !important; object-fit: cover !important; transition: transform .4s ease; } .primary-nav .mega-menu-column:hover .mega-menu-column-image img { transform: scale(1.035); } /* ----------------------------------------------------- FLOATING ICON ----------------------------------------------------- */ .primary-nav .mega-menu-column > a.mega-menu-column-title > .mega-menu-column-icon { position: absolute !important; left: 7px !important; top: 84px !important; width: 34px !important; height: 34px !important; min-width: 34px !important; max-width: 34px !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 0 !important; border: 3px solid #ffffff !important; border-radius: 10px !important; color: #ffffff !important; background: #0961a9 !important; box-shadow: 0 4px 12px rgba(24,61,94,.18); font-size: .76rem; line-height: 1; z-index: 5; } /* icon colors */ .primary-nav .mega-menu-column:nth-child(4n + 1) .mega-menu-column-icon { background: #0961a9 !important; } .primary-nav .mega-menu-column:nth-child(4n + 2) .mega-menu-column-icon { background: #684fd5 !important; } .primary-nav .mega-menu-column:nth-child(4n + 3) .mega-menu-column-icon { background: #f39a22 !important; } .primary-nav .mega-menu-column:nth-child(4n + 4) .mega-menu-column-icon { background: #20a66b !important; } /* ----------------------------------------------------- TITLE TEXT ----------------------------------------------------- */ .primary-nav .mega-menu-column > a.mega-menu-column-title > .mega-menu-column-text { display: block !important; width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 10px 8px 5px 5px !important; box-sizing: border-box !important; color: #123f73 !important; font-size: .88rem !important; font-weight: 750 !important; line-height: 1.25 !important; white-space: normal !important; } /* If title is short, keep icon relationship */ .primary-nav .mega-menu-column > a.mega-menu-column-title > .mega-menu-column-text:hover { color: #0961a9 !important; } /* ----------------------------------------------------- DESCRIPTION ----------------------------------------------------- */ .primary-nav .mega-menu-column > a.mega-menu-column-title > .mega-menu-column-main-description, .primary-nav .mega-menu-column > a.mega-menu-column-title > .mega-menu-column-description { display: -webkit-box !important; width: calc(100% - 7px) !important; margin: 0 0 0 7px !important; box-sizing: border-box !important; overflow: hidden !important; color: #70879c !important; font-size: .67rem !important; font-weight: 400 !important; line-height: 1.38 !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal !important; } /* ----------------------------------------------------- COLUMN ARROW ----------------------------------------------------- */ .primary-nav .mega-menu-column-arrow { display: none !important; } /* ----------------------------------------------------- SERVICE LINKS ----------------------------------------------------- */ .primary-nav .mega-menu-column > .mega-menu-list { position: relative; display: block !important; width: 100%; margin: 0 !important; padding: 5px 4px 0 7px !important; list-style: none; z-index: 3; } .primary-nav .mega-menu-column .mega-menu-item { position: relative; display: block; width: 100%; margin: 0; padding: 0; } .primary-nav .mega-menu-column .mega-menu-link { display: flex !important; align-items: center !important; width: 100% !important; min-height: 29px !important; margin: 0 !important; padding: 7px 0 !important; gap: 5px; box-sizing: border-box; color: #173f6d !important; background: transparent !important; border-radius: 5px; font-size: 0.9rem !important; font-weight: 500 !important; line-height: 1.35 !important; text-decoration: none !important; transform: none; transition: color .16s ease, background .16s ease, padding-left .16s ease; } .primary-nav .mega-menu-column .mega-menu-link:hover { color: #0961a9 !important; background: rgba(9,97,169,.04) !important; padding-left: 3px !important; } /* ----------------------------------------------------- BULLET ----------------------------------------------------- */ .primary-nav .mega-menu-column .mega-menu-link::before { content: "" !important; display: block !important; width: 5px !important; height: 5px !important; min-width: 5px !important; flex: 0 0 5px !important; margin: 0 !important; border-radius: 50% !important; background: #0961a9 !important; } .primary-nav .mega-menu-column:nth-child(4n + 2) .mega-menu-link::before { background: #684fd5 !important; } .primary-nav .mega-menu-column:nth-child(4n + 3) .mega-menu-link::before { background: #f39a22 !important; } .primary-nav .mega-menu-column:nth-child(4n + 4) .mega-menu-link::before { background: #20a66b !important; } /* ----------------------------------------------------- SMALL LINK ICON OFF ----------------------------------------------------- */ .primary-nav .mega-menu-column .mega-menu-link-icon { display: none !important; } .primary-nav .mega-menu-link-text { flex: 1 1 auto !important; min-width: 0 !important; display: block; color: inherit !important; } /* ----------------------------------------------------- RIGHT ARROW ----------------------------------------------------- */ .primary-nav .mega-menu-column .mega-menu-link-arrow { width: 18px !important; height: 18px !important; flex: 0 0 18px !important; display: flex !important; align-items: center !important; justify-content: center !important; margin-left: auto !important; color: #0961a9 !important; font-size: .56rem !important; } /* ----------------------------------------------------- NESTED LEVELS ----------------------------------------------------- */ .primary-nav .mega-menu-level-2, .primary-nav .mega-menu-level-3, .primary-nav .mega-menu-level-4 { padding-left: 10px !important; } /* ----------------------------------------------------- NO IMAGE FALLBACK ----------------------------------------------------- */ .primary-nav .mega-menu-column:not(.mega-menu-column-has-image) > a.mega-menu-column-title > .mega-menu-column-text { padding-left: 7px !important; } /* ----------------------------------------------------- 4 GRID HEIGHT ----------------------------------------------------- */ .primary-nav .mega-menu-columns.mega-menu-grid-4 .mega-menu-column { min-height: 258px; } /* ----------------------------------------------------- 3 GRID HEIGHT ----------------------------------------------------- */ .primary-nav .mega-menu-columns.mega-menu-grid-3 .mega-menu-column { min-height: 275px; } } /* ========================================================= LAPTOP ========================================================= */ @media (min-width: 992px) and (max-width: 1199px) { .primary-nav .nv-links > li.mega-menu > .mega-menu-panel { width: calc(100vw - 20px) !important; max-height: calc(100vh - 95px); } .primary-nav .mega-menu-inner { padding: 8px !important; border-radius: 15px !important; } .primary-nav .mega-menu-main-image { flex-basis: 205px !important; width: 205px !important; } .primary-nav .mega-menu-main-image img { min-height: 315px; } .primary-nav .mega-menu-columns { padding: 6px 3px !important; } .primary-nav .mega-menu-column { min-height: 225px; padding: 0 8px 9px !important; } .primary-nav .mega-menu-column > a.mega-menu-column-title > .mega-menu-column-image { height: 82px !important; } .primary-nav .mega-menu-column > a.mega-menu-column-title > .mega-menu-column-icon { top: 62px !important; width: 29px !important; height: 29px !important; min-width: 29px !important; flex-basis: 29px !important; border-width: 2px !important; } .primary-nav .mega-menu-column > a.mega-menu-column-title > .mega-menu-column-text { padding: 7px 4px 3px 41px !important; font-size: .76rem !important; } .primary-nav .mega-menu-column > a.mega-menu-column-title > .mega-menu-column-main-description, .primary-nav .mega-menu-column > a.mega-menu-column-title > .mega-menu-column-description { font-size: .60rem !important; } .primary-nav .mega-menu-column > .mega-menu-list { padding-left: 5px !important; } .primary-nav .mega-menu-column .mega-menu-link { min-height: 26px !important; font-size: .61rem !important; } } /* ========================================================= LARGE DESKTOP ========================================================= */ @media (min-width: 1200px) { .primary-nav .mega-menu-column > a.mega-menu-column-title > .mega-menu-column-image { height: 85px !important; } .primary-nav .mega-menu-column > a.mega-menu-column-title > .mega-menu-column-icon { top: 84px !important; } } /* ========================================================= FINAL DESKTOP DESCRIPTION FIX --------------------------------------------------------- IMPORTANT: The renderer outputs: .mega-menu-column-description inside .mega-menu-column-title. This rule is desktop-only and therefore cannot change the existing mobile menu. ========================================================= */ @media (min-width: 992px) { .primary-nav .mega-menu-column > a.mega-menu-column-title > .mega-menu-column-description { display: block !important; visibility: visible !important; opacity: 1 !important; width: calc(100% - 7px) !important; height: auto !important; max-height: 2.9em !important; min-height: 0 !important; margin: 0 0 0 7px !important; overflow: hidden !important; box-sizing: border-box !important; color: #6f879d !important; font-size: .67rem !important; font-weight: 400 !important; line-height: 1.38 !important; text-align: left !important; white-space: normal !important; position: relative !important; z-index: 4 !important; } .primary-nav .mega-menu-column > a.mega-menu-column-title > .mega-menu-column-description:empty { display: none !important; } /* Keep the card header from collapsing its description. */ .primary-nav .mega-menu-column > a.mega-menu-column-title { height: auto !important; min-height: 0 !important; overflow: visible !important; } } /* ========================================================= DESKTOP DESCRIPTION — LAPTOP ========================================================= */ @media (min-width: 992px) and (max-width: 1199px) { .primary-nav .mega-menu-column > a.mega-menu-column-title > .mega-menu-column-description { font-size: .60rem !important; line-height: 1.35 !important; max-height: 2.7em !important; } } /* ========================================================= MOBILE --------------------------------------------------------- The previously working mobile CSS is appended below. ========================================================= /* ========================================================= MOBILE <= 991 ========================================================= */ @media (max-width: 991px) { /* ===================================================== MEGA ROOT ===================================================== */ .nv-mobile-body .menu-item.mega-menu { position: relative; width: 100%; overflow: visible; } /* ===================================================== MEGA PANEL ===================================================== */ .nv-mobile-body .menu-item.mega-menu > .mega-menu-panel { position: static !important; display: none; width: 100% !important; margin: 0 !important; padding: 0 !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: none !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; overflow: visible !important; } /* ===================================================== OPEN MEGA PANEL ===================================================== */ .nv-mobile-body .menu-item.mega-menu.open > .mega-menu-panel { display: block !important; } /* ===================================================== INNER ===================================================== */ .nv-mobile-body .mega-menu-inner { display: block !important; width: 100%; background: transparent; border: 0; border-radius: 0; box-shadow: none; overflow: visible; } /* ===================================================== HIDE ALL IMAGES ===================================================== */ .nv-mobile-body .mega-menu-column-description, .nv-mobile-body .mega-menu-main-image, .nv-mobile-body .mega-menu-column-image, .nv-mobile-body .mega-menu-panel img { display: none !important; } /* ===================================================== MOBILE COLUMNS ===================================================== */ .nv-mobile-body .mega-menu-columns, .nv-mobile-body .mega-menu-grid-3, .nv-mobile-body .mega-menu-grid-4 { display: block !important; width: 100%; padding: 0 0 5px; margin: 0; overflow: visible; } /* ===================================================== COLUMN ===================================================== */ .nv-mobile-body .mega-menu-column { position: relative; width: 100%; min-width: 0; margin: 0; padding: 0 0 0 14px; border: 0 !important; border-bottom: 1px solid rgba( 228, 233, 239, .85 ) !important; } .nv-mobile-body .mega-menu-column:last-child { border-bottom: 0 !important; } /* ===================================================== MOBILE TITLE ===================================================== */ .nv-mobile-body .mega-menu-column-title { position: relative; display: flex; align-items: center; width: 100%; min-height: 46px; margin: 0; padding: 7px 48px 7px 0 !important; color: #263342 !important; background: transparent !important; border: 0 !important; font-size: .87rem; font-weight: 650; line-height: 1.4; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; } /* ===================================================== MOBILE COLUMN ARROW ===================================================== */ /* * IMPORTANT: * We create the arrow ourselves. * * Therefore it does NOT matter if the PHP * did not generate .mega-menu-column-arrow. */ .nv-mobile-body .mega-menu-column-has-children > .mega-menu-column-title::after { content: "\f107"; position: absolute; top: 50%; right: 2px; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; transform: translateY(-50%); font-family: "Font Awesome 6 Free"; font-size: 11px; font-weight: 900; color: var(--nv-gray); background: transparent; border-radius: 8px; transition: color .2s ease, background .2s ease, transform .25s ease; } /* ===================================================== OPEN ARROW ===================================================== */ .nv-mobile-body .mega-menu-column-has-children.mega-menu-open > .mega-menu-column-title::after { color: var(--nv-blue); background: rgba( 9, 97, 169, .08 ); transform: translateY(-50%) rotate(180deg); } /* ===================================================== OLD ARROW HIDE ===================================================== */ .nv-mobile-body .mega-menu-column-arrow { display: none !important; } /* ===================================================== CHILD LIST CLOSED ===================================================== */ .nv-mobile-body .mega-menu-column-has-children > .mega-menu-list { display: none !important; width: 100%; margin: 0; padding: 0 0 0 10px; opacity: 0; visibility: hidden; overflow: hidden; } /* ===================================================== CHILD LIST OPEN ===================================================== */ .nv-mobile-body .mega-menu-column-has-children.mega-menu-open > .mega-menu-list { display: block !important; opacity: 1; visibility: visible; padding-bottom: 7px; } /* ===================================================== OPEN TITLE ===================================================== */ .nv-mobile-body .mega-menu-column-has-children.mega-menu-open > .mega-menu-column-title { color: var(--nv-blue) !important; } /* ===================================================== MEGA ITEM ===================================================== */ .nv-mobile-body .mega-menu-item { width: 100%; margin: 0; padding: 0; } /* ===================================================== MEGA LINK ===================================================== */ .nv-mobile-body .mega-menu-link { display: flex; align-items: center; width: 100%; min-height: 38px; padding: 5px 3px; color: #354252 !important; background: transparent; border-radius: 6px; font-size: .83rem; font-weight: 500; line-height: 1.4; text-decoration: none; transform: none; } .nv-mobile-body .mega-menu-link:hover { color: var(--nv-blue) !important; background: rgba( 9, 97, 169, .05 ); } /* ===================================================== LINK ICON ===================================================== */ .nv-mobile-body .mega-menu-link-icon { width: 20px; height: 20px; flex: 0 0 20px; display: flex; align-items: center; justify-content: center; margin-right: 4px; color: var(--nv-blue); font-size: .6rem; } /* ===================================================== LINK TEXT ===================================================== */ .nv-mobile-body .mega-menu-link-text { flex: 1; min-width: 0; } /* ===================================================== NESTED MEGA ARROW ===================================================== */ .nv-mobile-body .mega-menu-item-has-children > .mega-menu-link { position: relative; padding-right: 38px; } .nv-mobile-body .mega-menu-item-has-children > .mega-menu-link::after { content: "\f107"; position: absolute; right: 2px; top: 50%; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; transform: translateY(-50%); font-family: "Font Awesome 6 Free"; font-size: 10px; font-weight: 900; color: var(--nv-gray); transition: transform .2s ease, color .2s ease; } /* ===================================================== HIDE OLD NESTED ARROW ===================================================== */ .nv-mobile-body .mega-menu-link-arrow { display: none !important; } /* ===================================================== NESTED CLOSED ===================================================== */ .nv-mobile-body .mega-menu-item-has-children > .mega-menu-list { display: none !important; padding-left: 10px; } /* ===================================================== NESTED OPEN ===================================================== */ .nv-mobile-body .mega-menu-item-has-children.mega-menu-open > .mega-menu-list { display: block !important; } /* ===================================================== NESTED OPEN ARROW ===================================================== */ .nv-mobile-body .mega-menu-item-has-children.mega-menu-open > .mega-menu-link::after { color: var(--nv-blue); transform: translateY(-50%) rotate(180deg); } } /* ========================================================= SMALL PHONE ========================================================= */ @media (max-width: 480px) { .nv-mobile-body .mega-menu-column { padding-left: 10px; } .nv-mobile-body .mega-menu-column-title { min-height: 44px; font-size: .84rem; } .nv-mobile-body .mega-menu-link { min-height: 36px; font-size: .81rem; } } /* ========================================================= MEGA MENU — DESKTOP ONLY SCROLL IMPORTANT: Does NOT change mobile styles. Does NOT change grid/layout. Does NOT change images. Does NOT change normal menu. ========================================================= */ @media (min-width: 992px) { .primary-nav .nv-links > li.mega-menu > .mega-menu-panel { /* * Let the content determine the height. */ height: auto !important; min-height: 0 !important; /* * Maximum height based on viewport. */ max-height: calc(100vh - 120px); /* * Scroll only when content is taller * than the available viewport. */ overflow-x: hidden !important; overflow-y: auto !important; /* * Keep scrolling inside Mega Menu. */ overscroll-behavior: contain; /* * Smooth mouse-wheel/touchpad scrolling. */ scroll-behavior: smooth; } /* ----------------------------------------------------- DO NOT LIMIT INNER CONTENT ----------------------------------------------------- */ .primary-nav .nv-links > li.mega-menu > .mega-menu-panel > .mega-menu-inner { height: auto !important; min-height: 0 !important; max-height: none !important; } /* ----------------------------------------------------- MEGA COLUMNS GROW NATURALLY ----------------------------------------------------- */ .primary-nav .mega-menu-panel .mega-menu-columns { height: auto !important; min-height: 0 !important; max-height: none !important; } /* ----------------------------------------------------- COLUMNS GROW NATURALLY ----------------------------------------------------- */ .primary-nav .mega-menu-panel .mega-menu-column { height: auto !important; min-height: 0 !important; max-height: none !important; } /* ----------------------------------------------------- DESKTOP SCROLLBAR ----------------------------------------------------- */ .primary-nav .nv-links > li.mega-menu > .mega-menu-panel::-webkit-scrollbar { width: 6px; } .primary-nav .nv-links > li.mega-menu > .mega-menu-panel::-webkit-scrollbar-track { background: transparent; } .primary-nav .nv-links > li.mega-menu > .mega-menu-panel::-webkit-scrollbar-thumb { background: rgba(23, 35, 51, .22); border-radius: 20px; } .primary-nav .nv-links > li.mega-menu > .mega-menu-panel::-webkit-scrollbar-thumb:hover { background: rgba(23, 35, 51, .35); } } /* ========================================================= TECHNUVIA MEGA MENU — REFERENCE DESIGN OVERRIDE --------------------------------------------------------- Desktop / laptop only. Designed to closely match the supplied reference image: - white rounded Mega Menu - 4 service cards - image on top - floating colored icon - title + description - thin divider - compact bullet links - blue/orange/green/purple/pink accent rotation - soft decorative corner shapes - clean spacing and shadow Mobile rules from the existing CSS are NOT changed. ========================================================= */ @media (min-width: 992px) { /* ===================================================== PANEL POSITION / SIZE ===================================================== */ .primary-nav .nv-links > li.mega-menu > .mega-menu-panel { top: calc(100% + 8px); width: min( 1180px, calc(100vw - 30px) ); padding: 0; background: transparent; border: 0; box-shadow: none; overflow-x: hidden !important; overflow-y: auto !important; } /* ===================================================== MAIN WHITE CONTAINER ===================================================== */ .primary-nav .mega-menu-inner { position: relative; display: flex; width: 100%; padding: 0; background: #ffffff; border: 1px solid #e6edf3; border-radius: 18px; box-shadow: 0 18px 45px rgba( 20, 48, 78, .14 ); overflow: hidden; } /* ===================================================== MAIN IMAGE ----------------------------------------------------- Keep parent image support. When parent image exists: image = left featured area columns = 3 grid ===================================================== */ .primary-nav .mega-menu-main-image { flex: 0 0 250px; width: 250px; min-height: 390px; position: relative; overflow: hidden; background: #f3f7fa; } .primary-nav .mega-menu-main-image img { width: 100%; height: 100%; min-height: 390px; display: block; object-fit: cover; transition: transform .45s ease; } .primary-nav .mega-menu-main-image:hover img { transform: scale(1.035); } /* ===================================================== FEATURED IMAGE OVERLAY ===================================================== */ .primary-nav .mega-menu-main-image-overlay { position: absolute; left: 0; right: 0; bottom: 0; padding: 70px 24px 24px; background: linear-gradient( to top, rgba( 8, 28, 48, .86 ), rgba( 8, 28, 48, .20 ), transparent ); } .primary-nav .mega-menu-main-image-overlay strong { color: #ffffff; font-size: 1.15rem; font-weight: 750; } /* ===================================================== COLUMNS WRAPPER ===================================================== */ .primary-nav .mega-menu-columns { flex: 1; min-width: 0; display: grid; align-items: stretch; padding: 22px 18px; gap: 0; background: #ffffff; } /* ===================================================== 4 GRID ===================================================== */ .primary-nav .mega-menu-columns.mega-menu-grid-4 { grid-template-columns: repeat( 4, minmax( 0, 1fr ) ); } /* ===================================================== 3 GRID ===================================================== */ .primary-nav .mega-menu-columns.mega-menu-grid-3 { grid-template-columns: repeat( 3, minmax( 0, 1fr ) ); } /* ===================================================== SERVICE CARD ===================================================== */ .primary-nav .mega-menu-column { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 285px; padding: 0 12px 12px; background: #ffffff; border: 0; overflow: visible; } .primary-nav .mega-menu-column + .mega-menu-column { border-left: 1px solid #e3eaf0; } /* ===================================================== REMOVE OLD DECORATION / ADD REFERENCE DECORATION ===================================================== */ .primary-nav .mega-menu-column::after { content: ""; position: absolute; right: 0; bottom: 0; width: 74px; height: 74px; border-radius: 48px 0 0 0; background: rgba( 9, 97, 169, .045 ); pointer-events: none; z-index: 0; } /* ===================================================== SERVICE IMAGE ----------------------------------------------------- Current markup has: title -> image -> list CSS order changes visual position to: image -> title -> description -> list ===================================================== */ .primary-nav .mega-menu-column-image { order: 1; position: relative; display: block; width: 100%; height: 90px; flex: 0 0 112px; margin: 0 0 0; padding: 0; overflow: hidden; background: #f2f6fa; border-radius: 8px; z-index: 1; } .primary-nav .mega-menu-column-image img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; } .primary-nav .mega-menu-column-image:hover img { transform: scale(1.04); } /* ===================================================== TITLE ===================================================== */ .primary-nav .mega-menu-column > .mega-menu-column-title { order: 2; position: relative; display: flex; align-items: center; gap: 8px; width: 100%; min-height: 39px; margin: -17px 0 0; padding: 0 7px 7px; color: #123a68; background: transparent; border: 0; font-size: .89rem; font-weight: 750; line-height: 1.25; text-decoration: none; z-index: 4; } /* ===================================================== ICON — FLOATING ON IMAGE ===================================================== */ .primary-nav .mega-menu-column-icon { width: 34px; height: 34px; flex: 0 0 34px; display: flex; align-items: center; justify-content: center; margin: 0; border: 3px solid #ffffff; border-radius: 10px; color: #ffffff; background: #0961a9; box-shadow: 0 4px 12px rgba( 20, 45, 70, .16 ); font-size: .76rem; } /* ===================================================== MULTI-COLOR SERVICE ICONS ===================================================== */ .primary-nav .mega-menu-column:nth-child(4n + 1) .mega-menu-column-icon { background: #0961a9; } .primary-nav .mega-menu-column:nth-child(4n + 2) .mega-menu-column-icon { background: #6950d8; } .primary-nav .mega-menu-column:nth-child(4n + 3) .mega-menu-column-icon { background: #f59b23; } .primary-nav .mega-menu-column:nth-child(4n + 4) .mega-menu-column-icon { background: #20a46b; } /* ===================================================== TITLE TEXT ===================================================== */ .primary-nav .mega-menu-column-text { flex: 1; min-width: 0; color: #123a68; white-space: normal; } /* ===================================================== DESCRIPTION ===================================================== */ .primary-nav .mega-menu-column-description { order: 3; display: -webkit-box; margin: -1px 7px 9px; overflow: hidden; color: #6c8297; font-size: .68rem; font-weight: 400; line-height: 1.42; -webkit-line-clamp: 2; -webkit-box-orient: vertical; z-index: 2; } /* ===================================================== LIST ===================================================== */ .primary-nav .mega-menu-column > .mega-menu-list { order: 4; position: relative; margin: 0; padding: 0 5px; z-index: 2; border-top: 1px solid #eeeeee; } /* ===================================================== SERVICE LINK ===================================================== */ .primary-nav .mega-menu-column .mega-menu-item { position: relative; margin: 0; } .primary-nav .mega-menu-column .mega-menu-link { display: flex; align-items: center; width: 100%; min-height: 32px; margin: 0; padding: 3px 2px; gap: 5px; color: #173d69; background: transparent; border-radius: 5px; font-size: .70rem; font-weight: 500; line-height: 1.35; text-decoration: none; transition: color .18s ease, background .18s ease, transform .18s ease; } .primary-nav .mega-menu-column .mega-menu-link:hover { color: #0961a9; background: rgba( 9, 97, 169, .045 ); transform: translateX(2px); } /* ===================================================== BULLET DOT ===================================================== */ .primary-nav .mega-menu-column .mega-menu-link::before { content: ""; width: 5px; height: 5px; flex: 0 0 5px; border-radius: 50%; background: #0961a9; } .primary-nav .mega-menu-column:nth-child(4n + 2) .mega-menu-link::before { background: #6950d8; } .primary-nav .mega-menu-column:nth-child(4n + 3) .mega-menu-link::before { background: #f59b23; } .primary-nav .mega-menu-column:nth-child(4n + 4) .mega-menu-link::before { background: #20a46b; } /* ===================================================== HIDE DUPLICATE ICON FOR SIMPLE BULLET LINKS ===================================================== */ .primary-nav .mega-menu-column .mega-menu-link-icon { display: none; } /* ===================================================== LINK CONTENT ===================================================== */ .primary-nav .mega-menu-link-content { flex: 1; min-width: 0; } .primary-nav .mega-menu-link-text { display: block; color: inherit; } /* ===================================================== LINK DESCRIPTION ===================================================== */ .primary-nav .mega-menu-link-description { display: -webkit-box; margin-top: 1px; color: #7890a5; font-size: .62rem; line-height: 1.3; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } /* ===================================================== RIGHT ARROW ===================================================== */ .primary-nav .mega-menu-column .mega-menu-link-arrow { width: 18px; height: 18px; flex: 0 0 18px; display: flex; align-items: center; justify-content: center; margin-left: auto; color: #0961a9; font-size: .56rem; } /* ===================================================== NESTED LINKS ===================================================== */ .primary-nav .mega-menu-column .mega-menu-level-2, .primary-nav .mega-menu-column .mega-menu-level-3, .primary-nav .mega-menu-column .mega-menu-level-4 { padding-left: 10px; } .primary-nav .mega-menu-column .mega-menu-level-2 .mega-menu-link, .primary-nav .mega-menu-column .mega-menu-level-3 .mega-menu-link { font-size: .67rem; } /* ===================================================== WHEN COLUMN HAS NO IMAGE ----------------------------------------------------- Keep spacing clean. ===================================================== */ .primary-nav .mega-menu-column .mega-menu-column-image:empty { display: none; } .primary-nav .mega-menu-column:not(.mega-menu-column-has-image) > .mega-menu-column-title { margin-top: 0; } /* ===================================================== 4-GRID HEIGHT / REFERENCE PROPORTION ===================================================== */ .primary-nav .mega-menu-columns.mega-menu-grid-4 .mega-menu-column { min-height: 270px; } /* ===================================================== 3-GRID WITH MAIN IMAGE ===================================================== */ .primary-nav .mega-menu-columns.mega-menu-grid-3 .mega-menu-column { min-height: 280px; } } /* ========================================================= LAPTOP 992 - 1199 ========================================================= */ @media (min-width: 992px) and (max-width: 1199px) { .primary-nav .mega-menu-main-image { flex-basis: 210px; width: 210px; } .primary-nav .mega-menu-columns { padding: 16px 12px; } .primary-nav .mega-menu-column { padding: 0 8px 10px; } .primary-nav .mega-menu-column-image { height: 80px; flex-basis: 86px; border-radius: 8px; } .primary-nav .mega-menu-column > .mega-menu-column-title { font-size: .78rem; min-height: 34px; margin-top: -15px; } .primary-nav .mega-menu-column-icon { width: 29px; height: 29px; flex-basis: 29px; border-width: 2px; font-size: .66rem; } .primary-nav .mega-menu-column-description { font-size: .62rem; margin-left: 4px; margin-right: 4px; } .primary-nav .mega-menu-column .mega-menu-link { min-height: 29px; font-size: .64rem; } } /* ========================================================= IMPORTANT: MOBILE IS STILL CONTROLLED BY THE ORIGINAL MOBILE CSS ========================================================= */ /* ========================================================= NAVIGATION COMPONENTS — ACTIONS + BURGER ========================================================= */ .nv-actions{display:flex;align-items:center;gap:.6rem} .nv-login{font-weight:600;color:var(--nv-blue-900);padding:.6rem .9rem} .nv-login:hover{color:var(--nv-blue)} .nv-burger{width:46px;height:46px;border-radius:10px;border:1px solid var(--nv-border);background:#fff;display:none;align-items:center;justify-content:center;flex-direction:column;gap:5px;cursor:pointer} .nv-burger span{width:20px;height:2px;background:var(--nv-blue-900);border-radius:2px;transition:.3s ease} .nv-burger.active span:nth-child(1){transform:translateY(7px) rotate(45deg)} .nv-burger.active span:nth-child(2){opacity:0} .nv-burger.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} @media (max-width:991px){ .primary-nav{display:none;} .nv-burger{display:flex} }