/******* Do not edit this file ******* Simple Custom CSS and JS - by Silkypress.com Saved: Sep 02 2026 | 10:01:37 */ /* ========================================================= SECOND CREEK TECHNOLOGIES NAVIGATION / MEGA MENU ========================================================= */ /* ========================================================= DROPDOWN LINKS ========================================================= */ .sct-nav .elementskit-dropdown > li > a { position: relative; color: #FFFFFF !important; border: 0 !important; transition: color 0.2s ease !important; } /* Animated underline */ .sct-nav .elementskit-dropdown > li > a::after { content: ""; position: absolute; left: 12px; right: 18px; bottom: 5px; height: 2px; background: #2563EB; transform: scaleX(0); transform-origin: left center; transition: transform 0.25s ease; } /* Hover */ .sct-nav .elementskit-dropdown > li > a:hover { color: #EAF2FF !important; } .sct-nav .elementskit-dropdown > li > a:hover::after { transform: scaleX(1); } /* ========================================================= CLICKABLE MEGA-MENU CARDS ========================================================= */ a.mega-service-card, a.mega-service-card:link, a.mega-service-card:visited { border: 1px solid rgba(37, 99, 235, 0.20) !important; } a.mega-service-card:hover, a.mega-service-card:focus, a.mega-service-card:focus-visible, a.mega-service-card:active { border: 1px solid rgba(37, 99, 235, 0.55) !important; } /* ========================================================= HAMBURGER MENU CTA --------------------------------------------------------- Hidden on desktop. Shown inside the hamburger menu on tablet and mobile. WordPress menu item class: mobile-menu-cta Nav Menu widget class: sct-nav ========================================================= */ .mobile-menu-cta { display: none !important; } /* ========================================================= DESKTOP MEGA MENU OPEN ANIMATION ========================================================= */ @media (min-width: 1201px) { .sct-nav li:hover > .elementskit-megamenu-panel .sct-mega-content, .sct-nav li:focus-within > .elementskit-megamenu-panel .sct-mega-content { animation: sctMegaOpen 0.26s ease both; } @keyframes sctMegaOpen { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } } /* ========================================================= TABLET / MOBILE MENU Slide menu in from the right ========================================================= */ @media (max-width: 1200px) { .sct-nav .elementskit-menu-container { left: auto !important; right: 0 !important; transform: translateX(100%) !important; } .sct-nav .elementskit-menu-container.active { transform: translateX(0) !important; } /* Show Schedule Consultation inside hamburger menu */ .sct-nav .mobile-menu-cta { display: block !important; margin: 28px 20px 0; } .sct-nav .mobile-menu-cta > a { display: flex !important; align-items: center; justify-content: center; padding: 14px 18px !important; background: #2563EB !important; color: #FFFFFF !important; border-radius: 8px; font-weight: 600; text-align: center; } .sct-nav .mobile-menu-cta > a:hover, .sct-nav .mobile-menu-cta > a:focus { background: #1D4ED8 !important; color: #FFFFFF !important; } .sct-nav .mobile-menu-cta > a::after { display: none !important; } } /* ================================================== SECOND CREEK — RESPONSIVE FIXED SHRINKING HEADER Desktop + Tablet + Mobile ================================================== */ /* ================================================== SCRIPT CONTAINER ================================================== */ .header-script-container { display: none !important; width: 0 !important; height: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; } /* ================================================== GLOBAL HEADER BEHAVIOR ================================================== */ .sct-main-header { position: relative !important; width: 100% !important; background-color: transparent !important; box-shadow: none !important; overflow: visible !important; z-index: 9999 !important; transition: height 0.28s ease, min-height 0.28s ease, background-color 0.28s ease, box-shadow 0.28s ease; } /* Header rows */ .sct-main-header .sct-header-row { width: 100% !important; margin: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; align-items: center !important; transition: height 0.28s ease, min-height 0.28s ease; } /* Logo transition */ .sct-main-header .sct-header-logo img { height: auto !important; transition: width 0.28s ease, max-width 0.28s ease; } /* Nav transition */ .sct-main-header .elementskit-navbar-nav > li > a { transition: padding 0.28s ease, color 0.20s ease; } /* Button transition */ .sct-main-header .elementor-button { transition: padding 0.28s ease, background-color 0.20s ease, border-color 0.20s ease, box-shadow 0.20s ease; } /* ================================================== GLOBAL STICKY STATE Applies to ALL devices ================================================== */ .sct-main-header.sct-header-scrolled { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; background-color: #ffffff !important; box-shadow: 0 4px 18px rgba(12, 38, 74, 0.10) !important; z-index: 99999 !important; } /* ================================================== DESKTOP 1025px+ ================================================== */ @media screen and (min-width: 1201px) { /* Normal height */ .sct-main-header, .sct-main-header .sct-header-row { height: 92px !important; min-height: 92px !important; } /* Normal logo */ .sct-main-header .sct-header-logo img { width: 176px !important; max-width: 176px !important; } /* Sticky height */ .sct-main-header.sct-header-scrolled, .sct-main-header.sct-header-scrolled .sct-header-row { height: 56px !important; min-height: 56px !important; } /* Sticky logo */ .sct-main-header.sct-header-scrolled .sct-header-logo img { width: 125px !important; max-width: 125px !important; } /* Sticky nav */ .sct-main-header.sct-header-scrolled .elementskit-navbar-nav > li > a { padding-top: 8px !important; padding-bottom: 8px !important; } /* Sticky CTA */ .sct-main-header.sct-header-scrolled .elementor-button { padding-top: 6px !important; padding-bottom: 6px !important; } } /* ================================================== TABLET 768px–1024px ================================================== */ @media screen and (min-width: 768px) and (max-width: 1200px) { /* Normal height */ .sct-main-header, .sct-main-header .sct-header-row { height: 82px !important; min-height: 82px !important; } /* Your normal tablet logo size */ .sct-main-header .sct-header-logo img { width: 166px !important; max-width: 166px !important; } /* Sticky height */ .sct-main-header.sct-header-scrolled, .sct-main-header.sct-header-scrolled .sct-header-row { height: 58px !important; min-height: 58px !important; } /* Sticky tablet logo */ .sct-main-header.sct-header-scrolled .sct-header-logo img { width: 128px !important; max-width: 128px !important; } } /* ================================================== MOBILE 767px and below ================================================== */ @media screen and (max-width: 767px) { /* Normal height */ .sct-main-header, .sct-main-header .sct-header-row { height: 76px !important; min-height: 76px !important; } /* Your normal mobile logo size */ .sct-main-header .sct-header-logo img { width: 150px !important; max-width: 150px !important; } /* Sticky height */ .sct-main-header.sct-header-scrolled, .sct-main-header.sct-header-scrolled .sct-header-row { height: 54px !important; min-height: 54px !important; } /* Sticky mobile logo */ .sct-main-header.sct-header-scrolled .sct-header-logo img { width: 115px !important; max-width: 115px !important; } } /* ================================================== HEADER NAV TYPOGRAPHY ================================================== */ .sct-main-header .elementskit-navbar-nav > li > a { color: #26364D !important; font-family: inherit !important; font-size: 16px !important; font-weight: 600 !important; line-height: 1.2 !important; letter-spacing: -0.1px !important; transition: color 0.20s ease, padding 0.28s ease !important; } /* Hover */ .sct-main-header .elementskit-navbar-nav > li > a:hover { color: #2563EB !important; } /* Current page / active menu */ .sct-main-header .elementskit-navbar-nav > li.current-menu-item > a, .sct-main-header .elementskit-navbar-nav > li.current-menu-ancestor > a { color: #2563EB !important; } /* Services dropdown arrow / indicator */ .sct-main-header .elementskit-submenu-indicator { color: inherit !important; } /* ================================================== STICKY NAV Slightly more compact without looking tiny ================================================== */ .sct-main-header.sct-header-scrolled .elementskit-navbar-nav > li > a { font-size: 15px !important; font-weight: 600 !important; } /* ========================================================= ABOUT DROPDOWN - DESKTOP ONLY Does not affect Services mega menu or mobile menu ========================================================= */ @media (min-width: 1201px) { /* Nav menu drop down indicator size */ .elementskit-navbar-nav > li > a .elementskit-submenu-indicator { font-size: 15px !important; line-height: 1 !important; width: 15px !important; height: 15px !important; margin-left: 9px !important; } /* Nav menu typography */ .elementskit-navbar-nav > li > a.ekit-menu-nav-link { font-family: inherit !important; font-size: 15px !important; font-weight: 500 !important; line-height: 1.2 !important; letter-spacing: 0 !important; } /* Dropdown panel */ .about-dropdown > .elementskit-dropdown, .about-dropdown > .sub-menu { width: 270px !important; min-width: 270px !important; top: calc(100% - 10px) !important; padding: 8px 0 !important; margin-top: 0 !important; background: #ffffff !important; border: 1px solid rgba(41, 51, 61, 0.08) !important; border-radius: 10px !important; box-shadow: 0 12px 30px rgba(41, 51, 61, 0.12) !important; overflow: hidden; } /* Remove oversized spacing from submenu items */ .about-dropdown > .elementskit-dropdown > li, .about-dropdown > .sub-menu > li { margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; } /* Links */ .about-dropdown > .elementskit-dropdown > li > a, .about-dropdown > .sub-menu > li > a { display: block !important; padding: 13px 20px !important; color: #22314a !important; background: transparent !important; font-size: 16px !important; font-weight: 600 !important; line-height: 1.35 !important; border: 0 !important; transition: color 0.2s ease, background-color 0.2s ease !important; } /* Hover */ .about-dropdown > .elementskit-dropdown > li > a:hover, .about-dropdown > .sub-menu > li > a:hover { color: #2563eb !important; background: #f5f8ff !important; } /* Current/active page */ .about-dropdown > .elementskit-dropdown > li.current-menu-item > a, .about-dropdown > .sub-menu > li.current-menu-item > a { color: #2563eb !important; background: #f5f8ff !important; } } /* ========================================================= TABLET / MOBILE NAV COLORS ========================================================= */ @media (max-width: 1200px) { /* Main mobile navigation links */ .sct-main-header .sct-nav .elementskit-navbar-nav > li > a { color: #FFFFFF !important; } /* Dropdown indicators/arrows */ .sct-main-header .sct-nav .elementskit-navbar-nav > li > a .elementskit-submenu-indicator { color: #FFFFFF !important; } /* Hover */ .sct-main-header .sct-nav .elementskit-navbar-nav > li > a:hover { color: #2563EB !important; } /* Current page */ .sct-main-header .sct-nav .elementskit-navbar-nav > li.current-menu-item > a, .sct-main-header .sct-nav .elementskit-navbar-nav > li.current-menu-ancestor > a { color: #2563EB !important; } } /* ========================================================= BREAKPOINT EXTENSION — 1025px TO 1200px --------------------------------------------------------- The full desktop nav (elementor-element-cb14e3b, the row marked elementor-hidden-tablet/elementor-hidden-mobile) wraps onto a second line starting around 1162px, and Elementor's own tablet breakpoint (elementor-hidden-desktop / elementor-hidden-tablet, frontend.min.css) only switches to the hamburger/off-canvas row (elementor-element-4df6807, marked elementor-hidden-desktop) at 1024px and below. This block extends that existing hamburger/tablet header up through 1200px by swapping which row is visible, then re-applies (scoped only to the now-visible tablet row) the same hamburger/off-canvas presentation ElementsKit's own nav-menu.css already applies natively at max-width:1024px, since that plugin file cannot be edited directly and its breakpoints are hard-coded to 1024/1025px. Desktop appearance at 1201px+ and native tablet/mobile behavior at 1024px and below are both untouched — this only fills the 1025-1200px gap. ========================================================= */ @media (min-width: 1025px) and (max-width: 1200px) { /* Swap which header row is visible */ .elementor-element-cb14e3b.sct-site-header.sct-header-row { display: none !important; } .elementor-element-4df6807.sct-site-header.sct-header-row { display: flex !important; } /* Show the hamburger/close buttons (hidden by default at desktop widths) */ .elementor-element-4df6807 button.elementskit-menu-hamburger, .elementor-element-4df6807 button.elementskit-menu-close { display: block !important; } /* Off-canvas panel: same fixed, full-height, slide-in presentation used at <=1024px */ .elementor-element-4df6807 .elementskit-menu-container.elementskit-menu-offcanvas-elements { position: fixed !important; display: flex !important; width: 300px !important; max-width: 350px !important; height: 100% !important; top: 0 !important; flex-direction: column-reverse !important; justify-content: flex-end !important; overflow-y: auto !important; overflow-x: hidden !important; padding-bottom: 10px !important; } .elementor-element-4df6807 .elementskit-menu-container { left: auto !important; right: 0 !important; transform: translateX(100%) !important; } .elementor-element-4df6807 .elementskit-menu-container.active { transform: translateX(0) !important; } /* Stack the nav list vertically instead of the desktop horizontal row */ .elementor-element-4df6807 .elementskit-navbar-nav { display: block !important; } /* Dropdown/mega submenu: collapsed accordion instead of desktop hover panel */ .elementor-element-4df6807 .elementskit-dropdown { position: relative !important; max-height: 0 !important; box-shadow: none !important; } .elementor-element-4df6807 .elementskit-dropdown.elementskit-dropdown-open { display: block !important; max-height: 2500px !important; opacity: 1 !important; visibility: visible !important; } /* Dark backdrop behind the open off-canvas panel */ .elementor-element-4df6807 .elementskit-menu-overlay { display: block !important; position: fixed !important; left: -100% !important; z-index: 14 !important; } .elementor-element-4df6807 .elementskit-menu-overlay.active { left: 0 !important; } } /* ========================================================= SERVICES MEGA-MENU PANEL — PREVENT VIEWPORT OVERFLOW --------------------------------------------------------- The "Services" mega-menu panel (elementskit-megamenu-panel, Elementor template post-15203) is set to a fixed 800px width in its own Elementor container settings, positioned left:0 relative to its trigger nav item. As viewport width narrows toward the trigger's own (fluid, centered-nav) position, the fixed 800px box extends past the right edge of the page and inflates document.documentElement.scrollWidth even while the panel itself is only visible on hover (visibility:hidden still contributes to layout overflow). The panel is only ever shown at desktop widths (1201px+ after the breakpoint extension above), where the trigger's left offset scales at roughly 0.5x the viewport width. This caps the panel to whichever is smaller: its original 800px, or (50vw + 40px) - a value that tracks the trigger's own position with an 8px safety margin, verified against 1201/1300/1400/1490px. Above ~1520px the cap exceeds 800px and has no effect, so appearance at 1600px/1920px+ is unchanged from before. ========================================================= */ .elementskit-megamenu-panel { max-width: calc(50vw + 40px) !important; } /* ========================================================= HAMBURGER ICON BARS — 1025px TO 1200px --------------------------------------------------------- ROOT CAUSE: the hamburger button itself becomes visible through 1200px (see "BREAKPOINT EXTENSION" block above), but ElementsKit's own nav-menu.css only defines the three icon bars (.elementskit-menu-hamburger-icon: height, width, display, spacing) inside its own hard-coded @media (max-width:1024px) block. Outside that range the button rendered as an empty bordered 45px box with no visible bars ("red rectangle" symptom) because the bars had no height/width/display of their own. This restores just those bar styles, scoped to the same element and the same 1025-1200px gap as the rest of this section. ========================================================= */ @media (min-width: 1025px) and (max-width: 1200px) { .elementor-element-4df6807 .elementskit-menu-hamburger-icon { height: 1px !important; width: 100% !important; display: block !important; margin-bottom: 4px !important; background-color: rgba(0, 0, 0, 0.5) !important; } .elementor-element-4df6807 .elementskit-menu-hamburger-icon:last-child { margin-bottom: 0 !important; } } /* ========================================================= TABLET COLUMN ALIGNMENT + CTA SIZE — 1025px TO 1200px --------------------------------------------------------- ROOT CAUSE: the logo/nav/CTA columns inside the tablet row (elementor-element-4df6807) get their "logo left, nav+CTA grouped right" positioning from Elementor's own per-element responsive overrides (widths, --justify-content, --order), but those overrides are only emitted for Elementor's Tablet tier, which stops at max-width:1024px. Above that - in this site's own 1025-1200px extension - the columns fell back to their Desktop-tier values (25%/50%/25% widths, each centered in its own zone), which is why the tablet header still looked centered instead of "logo left / CTA + hamburger right" in that range. Likewise the "Schedule Consultation" button fell back to its Desktop-tier font-size/padding instead of the smaller tablet size already used at <=1024px, which is why it appeared to change dimensions near the top of the tablet range. Fix: reproduce, for this same 1025-1200px range, the exact column widths/order/alignment and CTA button sizing Elementor already applies natively at <=1024px (verified working) - nothing new invented, just extended to close the gap. Desktop (elementor-element-cb14e3b tree, >=1201px) and native <=1024px tablet/mobile are both untouched. ========================================================= */ @media (min-width: 1025px) and (max-width: 1200px) { /* Logo column: left-aligned, matches the <=1024px "flex-start" + 50% width */ .elementor-element-cd05d92 { justify-content: flex-start !important; width: 50% !important; } .elementor-element-cd05d92.e-con { order: 1 !important; } /* Nav/hamburger column: right-aligned, content-width, matches <=1024px "flex-end" + 10% width + no grow/shrink */ .elementor-element-c5e7945 { justify-content: flex-end !important; width: 10% !important; flex-grow: 0 !important; flex-shrink: 0 !important; } .elementor-element-c5e7945.e-con { order: 3 !important; flex-grow: 0 !important; flex-shrink: 0 !important; } /* CTA column: right-aligned, matches <=1024px "flex-end" + 40% width, sits before the hamburger in source/visual order */ .elementor-element-f1dbce1 { justify-content: flex-end !important; align-items: center !important; width: 40% !important; } .elementor-element-f1dbce1.e-con { order: 2 !important; } /* CTA button: same size used at <=1024px, instead of falling back to the desktop size */ .elementor-element-f46e3e5 .elementor-button { font-size: 14px !important; padding: 12px 18px !important; } /* Hamburger/close buttons: same fixed sizing used at <=1024px */ .elementor-element-13281a7 button.elementskit-menu-hamburger { padding: 8px !important; width: 46px !important; border-radius: 3px !important; } .elementor-element-13281a7 button.elementskit-menu-close { padding: 8px !important; margin: 12px !important; width: 46px !important; border-radius: 3px !important; } } /* ========================================================= HAMBURGER TOGGLE - NO RED/PINK ACTIVE STATE --------------------------------------------------------- Guards every interactive state of the header hamburger button (hover, focus, focus-visible, :active, the ElementsKit .active class, and aria-expanded="true") to the brand blue used elsewhere in this stylesheet instead of a red/pink background from any other source. Keyboard focus keeps a visible outline instead of being removed. ========================================================= */ .sct-main-header button.elementskit-menu-hamburger, .sct-main-header button.elementskit-menu-close, .sct-main-header button.elementskit-menu-hamburger:hover, .sct-main-header button.elementskit-menu-close:hover, .sct-main-header button.elementskit-menu-hamburger:active, .sct-main-header button.elementskit-menu-close:active, .sct-main-header button.elementskit-menu-hamburger.active, .sct-main-header button.elementskit-menu-close.active, .sct-main-header button.elementskit-menu-toggler.active, .sct-main-header button.elementskit-menu-hamburger[aria-expanded="true"], .sct-main-header button.elementskit-menu-toggler[aria-expanded="true"] { background-color: transparent !important; border-color: rgba(0, 0, 0, 0.2) !important; } .sct-main-header button.elementskit-menu-hamburger:focus, .sct-main-header button.elementskit-menu-close:focus, .sct-main-header button.elementskit-menu-hamburger:focus-visible, .sct-main-header button.elementskit-menu-close:focus-visible { background-color: transparent !important; outline: 2px solid #2563EB !important; outline-offset: 2px !important; } .sct-main-header .elementskit-menu-hamburger-icon { background-color: #2563EB !important; } /* ========================================================= DESKTOP NAV HARD-KILL DURING 1025-1200px GAP --------------------------------------------------------- During a continuous/live resize (dragging the window width, not just loading at a fixed size), a Services/About dropdown that was hover-opened on the desktop nav row (elementor-element-cb14e3b) can still be visually painted for a frame as the row crosses into this gap and receives display:none, because its open state was driven by :hover plus a CSS transition that was still in flight. The end state is always correct once resize settles, but this closes that gap explicitly instead of relying on the row's display swap alone, so no dropdown/megamenu content belonging to the desktop row can ever paint or receive pointer events while ======================================================= this range is active, independent of transition timing. ========================================================= */ @media (min-width: 1025px) and (max-width: 1200px) { .elementor-element-cb14e3b.sct-site-header.sct-header-row { transition: none !important; pointer-events: none !important; visibility: hidden !important; } .elementor-element-cb14e3b .elementskit-megamenu-panel, .elementor-element-cb14e3b .elementskit-dropdown { display: none !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transition: none !important; } } /* ========================================================= OFF-CANVAS PANEL BACKGROUND - 1025px TO 1200px --------------------------------------------------------- Elementor's own generated CSS sets the off-canvas panel background (dark navy, from the nav widget's own Style tab) only inside its native Tablet tier, max-width:1024px. The 1025-1200px extension above reproduces this panel's position, size and content layout but never carried the background color forward, so in that gap the panel fell back to the plugin's default transparent gradient. With white nav-item text and a transparent panel, the open panel was invisible except for its own directly-styled Schedule Consultation button, which is why that button and the Services/Support text appeared to float unattached over the page instead of inside a solid slide-in panel. ========================================================= */ @media (min-width: 1025px) and (max-width: 1200px) { .elementor-element-4df6807 .elementskit-menu-container.elementskit-menu-offcanvas-elements { background-color: rgb(7, 22, 42) !important; } } /* ========================================================= OFF-CANVAS CLOSE BUTTON - 1025px TO 1200px --------------------------------------------------------- ElementsKit's own nav-menu.css wraps the panel's close button in .elementskit-nav-identity-panel, which is display:none unconditionally site-wide and is only set to display:block inside ElementsKit's own max-width:1024px block. This site's 1025-1200px extension already shows the close button itself (display:block, above), but its parent stayed display:none, so the button had zero size and could not be seen or clicked. Mirrors only that one native rule (plus the two layout rules it depends on) for this range. ========================================================= */ @media (min-width: 1025px) and (max-width: 1200px) { .elementor-element-4df6807 .elementskit-nav-identity-panel { display: block !important; position: relative !important; z-index: 5 !important; width: 100% !important; } .elementor-element-4df6807 .elementskit-nav-identity-panel .elementskit-site-title { float: left !important; } .elementor-element-4df6807 .elementskit-nav-identity-panel button.elementskit-menu-close { float: right !important; } } /* ========================================================= NEUTRALIZE DESKTOP HOVER SUBMENU - 1025px TO 1200px --------------------------------------------------------- ElementsKit's own nav-menu.css opens dropdowns/mega-panels on :hover via two selectors scoped only to @media (min-width:1025px) with no upper bound: .elementskit-navbar-nav-default.ekit-nav-dropdown-hover .elementskit-megamenu-has:hover>.elementskit-megamenu-panel and .ekit-nav-dropdown-hover .elementskit-dropdown-has:hover >.elementskit-dropdown - both unconditionally active from 1025px up, including inside this off-canvas panel, which is why About/Services opened on hover instead of click in this range even though the same widget's click handler (verified at 1000px: toggles .elementskit-dropdown-open on the panel, no ARIA state used) already works correctly here too. Suppressing hover only when the panel has NOT been click-opened (:not(.elementskit-dropdown-open)) neutralizes the unwanted hover-reveal while leaving the click mechanism and an already-open panel (even if the cursor rests on it) completely alone. ========================================================= */ @media (min-width: 1025px) and (max-width: 1200px) { .elementor-element-4df6807 .elementskit-navbar-nav-default.ekit-nav-dropdown-hover .elementskit-megamenu-has:hover > .elementskit-megamenu-panel:not(.elementskit-dropdown-open) { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } .elementor-element-4df6807 .ekit-nav-dropdown-hover .elementskit-dropdown-has:hover > .elementskit-dropdown:not(.elementskit-dropdown-open) { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } } /* ========================================================= IDENTITY/LOGO SIZING + ITEM SPACING - 1025px TO 1200px --------------------------------------------------------- Elementor's own generated CSS for this nav widget sets the compact identity-panel padding, constrained logo size, and tighter link/indicator/submenu sizing used at <=1024px, all scoped only to that native max-width:1024px tier. Outside it the logo fell back to its native 300x169px size (verified: 160x60px at 1000px vs 300x169px at 1100px) and links fell back to this site's own unconditional 16px desktop size instead of the compact 15px tablet size, which is what made the panel look oversized/differently spaced than <=1024px. Mirrors only these specific sizing/spacing values, read directly from Elementor's own <=1024px generated rules for this widget - no colors or unrelated properties touched. ========================================================= */ @media (min-width: 1025px) and (max-width: 1200px) { .elementor-element-4df6807 .elementskit-nav-identity-panel { padding: 10px 0 !important; } .elementor-element-4df6807 .elementskit-nav-logo { margin: 5px 0 !important; padding: 5px !important; } .elementor-element-4df6807 .elementskit-nav-logo > img { max-width: 160px !important; max-height: 60px !important; } .elementor-element-4df6807 .elementskit-navbar-nav > li > a { padding: 10px 15px !important; } .elementor-element-4df6807 .elementskit-navbar-nav > li > a .elementskit-submenu-indicator, .elementor-element-4df6807 .elementskit-navbar-nav > li > a .ekit-submenu-indicator-icon { font-size: 11px !important; } .elementor-element-4df6807 .elementskit-navbar-nav .elementskit-submenu-panel > li > a { font-size: 15px !important; padding: 15px !important; } .elementor-element-4df6807 .elementskit-submenu-panel { padding: 20px 24px !important; } .elementor-element-4df6807 button.elementskit-menu-close { font-size: 15px !important; } } /* ========================================================= COLLAPSED SUBMENU DISPLAY:NONE - 1025px TO 1200px --------------------------------------------------------- The earlier BREAKPOINT EXTENSION block set max-height:0 on the closed .elementskit-dropdown, matching one native rule, but native ElementsKit CSS also sets display:none on the same closed state (a separate rule scoped to max-width:1024px and min-width:766px) which this extension never mirrored. With only max-height:0 the element stayed display:block, so its own padding (20px 24px, mirrored above) and border still rendered as empty space under each collapsed item - the extra whitespace under About/Services compared to <=1024px (verified: closed dropdown height 0px at 1000px vs 42px at 1100px, display:none vs display:block). Adding display:none for the closed state, alongside the already-mirrored display:block on .elementskit-dropdown-open, closes that gap. ========================================================= */ @media (min-width: 1025px) and (max-width: 1200px) { .elementor-element-4df6807 .elementskit-dropdown { display: none !important; } .elementor-element-4df6807 .elementskit-dropdown.elementskit-dropdown-open { display: block !important; } } /* ========================================================= SUBMENU BORDER REMOVAL - 1025px TO 1200px --------------------------------------------------------- ElementsKit's own base (unconditional) nav-menu.css gives every .elementskit-dropdown a 1px solid #dadada border by default. At <=1024px a separate native rule resets this to border:0 for the off-canvas accordion look. That reset was present in an earlier draft of this compatibility block but was cut when it was trimmed down to only the identity-panel fix, leaving the plugin's generic gray border visible around the expanded About/Services panel in this range (verified: border 0px at 1000px vs 1px solid rgb(218,218,218) at 1100px). Restoring just this one property, scoped to this tablet row. ========================================================= */ @media (min-width: 1025px) and (max-width: 1200px) { .elementor-element-4df6807 .elementskit-dropdown { border: 0 !important; } }