/* ========================================================== PDSTYLE — NAVIGATION COMPONENT Proadign Toolkit PURPOSE: Reusable Divi navigation system for Proadign website builds. FEATURES: - Optional desktop nav underline - Optional "MENU" label beside Divi mobile hamburger - Mobile off-canvas menu - Dark page scrim while menu is open - Back to Home panel header - Close button - Project logo in panel footer - Body scroll lock while menu is open REQUIRES: - Divi Menu Module - navigation.js - PDSTYLE global project variables EXPECTED GLOBAL VARIABLES: --pdstyle-primary --pdstyle-accent --pdstyle-cream --pdstyle-charcoal --pdstyle-white --pdstyle-logo-url ========================================================== DIVI MENU MODULE CLASSES ========================================================== DESKTOP UNDERLINE: pdstyle-nav-underline MOBILE "MENU" LABEL: pdstyle-mobile-menu MOBILE OFF-CANVAS PANEL: pdstyle-mobile-offcanvas These may be combined on the same Divi Menu Module: pdstyle-nav-underline pdstyle-mobile-menu pdstyle-mobile-offcanvas ========================================================== INTERNAL / GENERATED CLASSES ========================================================== The following are created or managed automatically by navigation.js and normally do not need to be added manually in Divi: pdstyle-mobile-panel-header pdstyle-mobile-home-link pdstyle-mobile-home-arrow pdstyle-mobile-close pdstyle-mobile-panel-footer pdstyle-mobile-panel-logo pdstyle-menu-open ========================================================== */ /* ========================================================== 01 — DESKTOP NAVIGATION ========================================================== */ /* ---------------------------------------------------------- TOP-LEVEL LINKS ---------------------------------------------------------- */ .pdstyle-nav-underline .et-menu > li > a { position: relative; } /* ---------------------------------------------------------- UNDERLINE ---------------------------------------------------------- */ .pdstyle-nav-underline .et-menu > li > a::before { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 3px; background: var(--pdstyle-accent); transform: scaleX(0); transform-origin: center; transition: transform 0.2s ease; } /* ---------------------------------------------------------- HOVER / CURRENT PAGE / CURRENT SECTION ---------------------------------------------------------- */ .pdstyle-nav-underline .et-menu > li > a:hover::before, .pdstyle-nav-underline .et-menu > li.current-menu-item > a::before, .pdstyle-nav-underline .et-menu > li.current-menu-ancestor > a::before { transform: scaleX(1); } /* ---------------------------------------------------------- REMOVE DIVI DROPDOWN TOP BORDER ---------------------------------------------------------- */ .pdstyle-nav-underline .et-menu-nav .sub-menu { border-top: none !important; } /* ========================================================== DESKTOP ONLY ========================================================== */ @media (min-width: 981px) { /* -------------------------------------------------------- FIRST-LEVEL DROPDOWN OFFSET -------------------------------------------------------- */ .pdstyle-nav-underline .et-menu > li.menu-item-has-children > .sub-menu { margin-top: 8px !important; } /* -------------------------------------------------------- DROPDOWN HOVER BRIDGE -------------------------------------------------------- */ .pdstyle-nav-underline .et-menu > li.menu-item-has-children > .sub-menu::before { content: ""; position: absolute; left: 0; top: -8px; width: 100%; height: 8px; background: transparent; pointer-events: auto; } /* -------------------------------------------------------- DROPDOWN TYPOGRAPHY -------------------------------------------------------- */ .pdstyle-nav-underline .et-menu > li.menu-item-has-children > .sub-menu > li > a { font-size: 14px !important; line-height: 1.3; } } /* ========================================================== 02 — MOBILE MENU LABEL ========================================================== */ @media (max-width: 980px) { .pdstyle-mobile-menu .mobile_menu_bar { display: flex; align-items: center; gap: 8px; } .pdstyle-mobile-menu .mobile_menu_bar::after { content: "MENU"; color: var(--pdstyle-charcoal); font-size: 16px; font-weight: 700; line-height: 1; letter-spacing: 0.4px; } } /* ========================================================== 03 — MOBILE OFF-CANVAS MENU ========================================================== */ @media (max-width: 980px) { /* -------------------------------------------------------- PANEL SHELL -------------------------------------------------------- */ .pdstyle-mobile-offcanvas .et_mobile_menu { display: block !important; position: fixed !important; top: 0 !important; right: 0 !important; left: auto !important; width: min(85vw, 400px) !important; height: 100vh !important; max-height: 100vh !important; margin: 0 !important; padding: 78px 0 24px !important; background: var(--pdstyle-white) !important; border-top: 0 !important; overflow-y: auto !important; overflow-x: hidden !important; z-index: 10001 !important; /* CLOSED STATE */ transform: translateX(100%); opacity: 0; visibility: hidden; pointer-events: none; box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0), -8px 0 30px rgba(0, 0, 0, 0); transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.22s ease, box-shadow 0.30s ease, visibility 0s linear 0.38s; } /* -------------------------------------------------------- OPEN STATE -------------------------------------------------------- */ .pdstyle-mobile-offcanvas .mobile_nav.opened .et_mobile_menu { transform: translateX(0); opacity: 1; visibility: visible; pointer-events: auto; box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.65), -8px 0 30px rgba(0, 0, 0, 0.16); transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.22s ease, box-shadow 0.30s ease, visibility 0s; } /* -------------------------------------------------------- TOP-LEVEL NAVIGATION -------------------------------------------------------- */ .pdstyle-mobile-offcanvas .et_mobile_menu > li > a { display: block; padding: 18px 24px !important; color: var(--pdstyle-charcoal) !important; font-size: 16px !important; font-weight: 700 !important; line-height: 1.2; letter-spacing: 0.6px; border-bottom: 1px solid #e5e5e5; } /* -------------------------------------------------------- CHILD NAVIGATION -------------------------------------------------------- */ .pdstyle-mobile-offcanvas .et_mobile_menu .sub-menu { margin: 0 !important; padding: 0 !important; background: var(--pdstyle-cream) !important; } .pdstyle-mobile-offcanvas .et_mobile_menu .sub-menu li a { padding: 14px 24px 14px 38px !important; color: var(--pdstyle-charcoal) !important; font-size: 14px !important; font-weight: 600 !important; letter-spacing: 0.3px; border-bottom: 1px solid #e5e5e5; } /* -------------------------------------------------------- PANEL HEADER -------------------------------------------------------- */ .pdstyle-mobile-panel-header { position: absolute; top: 0; left: 0; right: 0; min-height: 78px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; background: var(--pdstyle-white); border-bottom: 1px solid #e5e5e5; z-index: 3; } /* -------------------------------------------------------- BACK TO HOME -------------------------------------------------------- */ .pdstyle-mobile-home-link { display: inline-flex; align-items: center; gap: 10px; color: var(--pdstyle-charcoal) !important; font-size: 16px; font-weight: 700; line-height: 1; letter-spacing: 0.6px; text-decoration: none !important; } .pdstyle-mobile-home-link:hover, .pdstyle-mobile-home-link:focus { color: var(--pdstyle-primary) !important; } .pdstyle-mobile-home-arrow { display: inline-flex; align-items: center; justify-content: center; color: var(--pdstyle-accent); font-size: 22px; font-weight: 400; line-height: 1; transform: translateY(-1px); } /* -------------------------------------------------------- CLOSE BUTTON -------------------------------------------------------- */ .pdstyle-mobile-close { position: static; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; padding: 0; margin: 0; border: 0; background: transparent; color: var(--pdstyle-charcoal); font-size: 36px; font-weight: 300; line-height: 1; cursor: pointer; } .pdstyle-mobile-close:hover, .pdstyle-mobile-close:focus { color: var(--pdstyle-primary); } /* -------------------------------------------------------- PANEL FOOTER / PROJECT LOGO Uses: --pdstyle-logo-url -------------------------------------------------------- */ .pdstyle-mobile-panel-footer { margin-top: 0; padding: 26px 24px; background: var(--pdstyle-cream); border-top: 1px solid #e5e5e5; } .pdstyle-mobile-panel-logo { display: block; width: 220px; max-width: 75%; height: 90px; margin: 0 auto; background-image: var(--pdstyle-logo-url); background-repeat: no-repeat; background-position: center; background-size: contain; text-decoration: none; } /* -------------------------------------------------------- LOCK PAGE WHILE MENU IS OPEN -------------------------------------------------------- */ body.pdstyle-menu-open { overflow: hidden; } }