/* Theme Name: Astra Child (Native) Template: astra Description: Native Gutenberg/PHP header, footer, and homepage template - no Elementor Theme Builder dependency. Version: 1.0.0 Author: abestever Text Domain: astra-child */ /* Native header (replaces the Elementor Pro Theme Builder Header #3345) - header.php now calls Astra's own astra_header(), which already produces a working logo/nav-menu/mobile-toggle (confirmed Astra's own nav walker generates the same arrow-icon/dropdown markup Elementor's nav-menu widget was using, and Astra's own theme JS - already loaded regardless of Elementor - already drives the interactions). This block re-applies the visual settings the Elementor Header used to carry in its own _elementor_data (background #FFF8DC, position:fixed + z-index:999 via the "header-wrap" css_classes setting) directly, since none of that exists anymore for astra_header()'s plain output to inherit. */ .astra-child-header { position: fixed; top: 0; left: 0; width: 100%; z-index: 999; background-color: #FFF8DC; } .astra-child-header .ast-container { max-width: var(--site-max-width); } /* Astra's own ".site-primary-header-wrap" carries a fixed 20px left padding around the logo/nav/search row - nudged to 27px/19px here to land the logo and search icon at the exact same 410px/1504px points the content boxes below already target (single-post-layout's own 27px/19px padding, matched to the Elementor header's logo/search position back when this width-alignment work was first done). */ .astra-child-header .site-primary-header-wrap { padding-left: 27px; padding-right: 19px; } /* Slide-search input box - the search-submit button (with its icon) sits over the input's own right edge, and the input's default 9.75px right padding wasn't enough to clear it, so typed text ran under the icon. Widened to give the ~19px-wide icon clearance plus a comfortable gap. */ .ast-search-menu-icon.slide-search input.search-field { padding-right: 40px; } /* Mobile/tablet header row (<=921px, Astra's own mobile-menu breakpoint - above it a second, separate "desktop" row with the full nav menu is shown instead and this one is display:none, so this never touches desktop) - swaps the search icon and hamburger menu toggle so search sits to the left of the hamburger instead of the reverse. Both are direct children of the same flex row (.ast-grid-right-section), so a plain order swap is enough; :not(.ast-header-search) targets the toggle's own wrapper without needing to name its specific class. */ @media (max-width: 921px) { .site-header-primary-section-right.ast-grid-right-section > .ast-header-search { order: 1; } .site-header-primary-section-right.ast-grid-right-section > .ast-builder-layout-element:not(.ast-header-search) { order: 2; } /* The order swap above added no spacing of its own (they sat flush against each other, 0px apart) - standard gap between the two. */ .site-header-primary-section-right.ast-grid-right-section { gap: 16px; } /* Astra's own markup gives these two elements different internal alignment by default (search: align-items:normal, hamburger: align-items:center) - forced consistent here so both icons center themselves the same way relative to their own box. */ .astra-search-icon, .menu-toggle { align-items: center; } /* Hamburger lines were noticeably thinner than the search icon's own visual weight at Astra's default 20px - sized up to match better. !important needed to beat Astra's own more specific default rule for .ast-mobile-svg. */ .menu-toggle svg { width: 26px !important; height: 26px !important; } } /* Logo - a bit smaller than its native 185x78px per request (same resize previously applied to the Elementor header's own logo widget). */ .astra-child-header .custom-logo { width: 150px !important; height: auto !important; } /* Astra's own nav walker adds the same redundant arrow-icon markup to every leaf item inside a dropdown that the Elementor version had (see the .elementor-nav-menu--dropdown rule below, kept for reference/in case any old cached markup still uses it) - hidden the same way, keyed off Astra's own ".sub-menu" class this time since that's what astra_header()'s native markup actually uses. */ .main-header-menu .sub-menu .icon-arrow { display: none; } :root { /* Matches the Elementor Header's own boxed container width (1140px, confirmed identical on production - an Elementor Kit setting, not something this stylesheet controls) so this stylesheet's homepage/ archive/blog sections line up with the header above them instead of drifting to Astra's separate 1200px theme container width. The Elementor Footer uses a third, wider width (1220px) of its own - pre-existing on production too, left as-is since nothing here controls it either. */ --site-max-width: 1140px; --site-accent: #b08967; --site-accent-hover: #a67f5e; /* Elementor Footer's own boxed width (1220px by its widget settings, pre-existing on production too) - narrowed via the override below to this same 1140px so it lines up with the header and this stylesheet's own sections instead of running wider than everything else. */ /* Header/footer are the original Elementor Header #3345 / Footer #564 (kept live, not replaced - see header.php/footer.php removal), which ships its own fixed-header body padding via the site's existing Custom CSS (post 16: body{padding-top:97.66px}, matching the header's original 78px-tall logo). Shrinking that logo to 150x63px below (a ~15px shorter header) made post 16's own padding-top too tall for the header's new real height, opening a gap between the header and whatever sits right below it (the sticky category subnav, most visibly, since it stuck at the OLD taller offset while the header itself had already gotten shorter above it). Overriding both the body padding-top and this stylesheet's own --header-height here (rather than editing post 16 itself, which is the site's own pre-existing content, not this theme's) keeps the fix self-contained to the actual cause - the logo resize - and easy to revert together with it. 90px desktop / 87.67px mobile - re-measured directly against the native astra_header() header (see header.php) after the header rebuild, since Astra's own internal spacing around the logo/nav differs slightly from the old Elementor header's, even with the same 150x63 logo size. */ --header-height: 90px; } body { padding-top: var(--header-height) !important; } @media (max-width: 767px) { :root { --header-height: 87.67px; } } /* The site's existing Elementor Header (#3345, kept live - see above) adds an ast-icon/icon-arrow SVG to EVERY nav menu item's markup, including leaf items inside a dropdown (e.g. "Bird Food"/"Bird Accessories" under "Bird") that have no further children of their own - present in the raw markup on production too, just visually redundant there since it's a generic toggle icon meant only for items that actually open a further submenu. This site's menu is only ever two levels deep, so every icon inside a dropdown's own