/* Theme Name: Astra Child — BM Exhaust Theme URI: https://bmexhaust.felkesz.hu/ Description: Astra gyerektéma a BM Exhaust webáruházhoz. Itt CSAK az a stílus él, amit az Elementor / ElementsKit widget-beállításaiban nem lehet megadni. Author: WEBinIT Author URI: https://webinit.hu/ Template: astra Version: 1.0.2 Text Domain: astra-child */ /* =========================================================================== FEJLÉCMENÜ — amit a widget beállításai NEM tudnak A menü a fejléc sablonban (BM Fejléc, #142) az ElementsKit „ekit-nav-menu" widgete — NEM az Elementor Pro Nav Menu-je. A teljes designja a widget saját beállításaiban van (Tartalom / Stílus fülek): • menüsáv magassága: 66px (a 86px-es fejléchez igazítva) • fő menü: Montserrat 14px / 600, betűköz 0,2px, szín #111111, hover és aktív #D50000, belső margó 22px 9px, elemköz 0 • piros aláhúzás: „Menu text border" hover és aktív állapotban, alul 3px, #D50000 • almenü panel: háttér #111111, sarok 10px, árnyék, min. szélesség 230px, panel-belsőmargó 8px 0, keret: nincs • almenü elemek: Montserrat 14px / 600, #FFFFFF 82%-os, hover és aktív fehér, belső margó 12px 22px • almenü-nyíl: színe #111111, mérete 12px, térköz 6px • hamburger: ikon #111111 (hover fehér), háttér átlátszó (hover #D50000), keret 1px #E3E3E3 (hover #D50000), sarok 8px, szélesség 44px • mobil panel: bezáró gomb #111111 / átlátszó, keret 1px #E3E3E3 (hover fehér ikon piros háttéren), sarok 8px, panelszélesség 350px HÁROM BUKTATÓ, amibe beleszaladtam — ha értéket módosítasz, gondolj rájuk: 1. Az „elementskit_mobile_menu_panel_width" a neve ellenére NEM mobil-specifikus: médialekérdezés nélkül tesz max-width-et a .elementskit-menu-container-re. Az asztali értéke asztalon is hat (300px-re szorította a menüt). Csak a tablet/mobil változatát állítsd. 2. A hamburger és a bezáró gomb méret- és sarok-kontrolljainak SAJÁT tablet-alapértékük van (sarok 3px, szélesség 45px). Mivel ezek a gombok csak tableten/mobilon látszanak, az asztali érték hatástalan — a tablet változatot is meg kell adni. 3. Az ElementsKit gyárilag 100px magas menüsávot rak be. A 86px-es fejlécünkben ettől a menüpontok és az aláhúzás 26px-et kilógtak alul; a „Menu Height" mező (66px) oldja meg. Ha stílust akarsz módosítani, ELŐSZÖR a widget beállításaiban keresd. Az alábbiakra viszont NINCS mező. Ezért itt vannak, KIKOMMENTELVE — ha kell valamelyik, vedd ki a komment jeleket és mentsd a fájlt. =========================================================================== */ /* =========================================================================== ÉLES SZABÁLYOK — ezek működnek (nem kikommentelve) =========================================================================== */ /* Az almenü első és utolsó elemének sarka kövesse a panel lekerekítését. Az ElementsKitben az első/utolsó almenü-elemhez CSAK keret-csoport van (elementskit_menu_item_border_first_child / _last_child), lekerekítés nincs, ezért nem állítható be a widgetben. A panel `overflow: visible`, így a hover-háttér négyzetes sarka kilóg a panel 10px-es sarkán. Csak asztali nézetben kell: 1024px alatt a legördülő sima lista a panelben. */ @media (min-width: 1025px) { .elementskit-navbar-nav .elementskit-submenu-panel > li:first-child, .elementskit-navbar-nav .elementskit-submenu-panel > li:first-child > a { border-top-left-radius: 10px; border-top-right-radius: 10px; } .elementskit-navbar-nav .elementskit-submenu-panel > li:last-child, .elementskit-navbar-nav .elementskit-submenu-panel > li:last-child > a { border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; } } /* =========================================================================== KIKOMMENTELT SZABÁLYOK — nincs rájuk widget-beállítás, de nincsenek bekapcsolva. Ha kell valamelyik, vedd ki a komment jeleket. =========================================================================== */ /* --------------------------------------------------------------------------- 1) FERDE (PARALLELOGRAMMA) ALÁHÚZÁS A widget aláhúzása sima border-bottom, mindig vízszintes téglalap. MEGJEGYZÉS: a gombok időközben sima lekerekítettek lettek, tehát a ferde motívum már NEM az oldal stílusa — ez a blokk csak akkor kell, ha valaha mégis ferde kiemelést szeretnél a menüben. --------------------------------------------------------------------------- */ /* .elementskit-navbar-nav > li > a { position: relative; border-bottom-color: transparent !important; } .elementskit-navbar-nav > li:hover > a::after, .elementskit-navbar-nav > li.current-menu-item > a::after, .elementskit-navbar-nav > li.current-menu-ancestor > a::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 22px; height: 3px; border-radius: 2px; background: #D50000; transform: skewX(-10deg); } */ /* --------------------------------------------------------------------------- 2) AZ ALÁHÚZÁS KÖZELEBB A SZÖVEGHEZ A border-bottom a 31px-es belső margó aljára kerül, tehát jóval a felirat alatt fut. A widgetben nincs eltolás-beállítás. Ha a szöveghez kell simulnia (a belső margó megtartása mellett): --------------------------------------------------------------------------- */ /* .elementskit-navbar-nav > li > a { position: relative; border-bottom-color: transparent !important; } .elementskit-navbar-nav > li:hover > a::after, .elementskit-navbar-nav > li.current-menu-item > a::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 24px; height: 3px; background: #D50000; } */ /* --------------------------------------------------------------------------- 3) ALMENÜ-NYÍL ELFORGATÁSA NYITÁSKOR Az ikon kiválasztható, az elforgatására nincs beállítás. --------------------------------------------------------------------------- */ /* .elementskit-navbar-nav .elementskit-submenu-indicator { transition: transform .25s ease; } .elementskit-navbar-nav > li:hover > a .elementskit-submenu-indicator { transform: rotate(180deg); } */ /* --------------------------------------------------------------------------- 4) ALMENÜ BEÚSZÁSA Az ElementsKit azonnal megjeleníti a panelt; nincs mező az animációra. --------------------------------------------------------------------------- */ /* .elementskit-navbar-nav .elementskit-submenu-panel { transform: translateY(-8px); transition: transform .22s ease, opacity .22s ease; } .elementskit-navbar-nav > li:hover > .elementskit-submenu-panel { transform: translateY(0); } */ /* --------------------------------------------------------------------------- 5) ALMENÜ-ELEM PIROS JELÖLŐSÁVVAL HOVERKOR A szöveg- és háttérszín állítható, ez a bal oldali kis sáv nem. --------------------------------------------------------------------------- */ /* .elementskit-navbar-nav .elementskit-submenu-panel > li > a { position: relative; transition: padding-left .2s ease; } .elementskit-navbar-nav .elementskit-submenu-panel > li > a::before { content: ""; position: absolute; left: 0; top: 50%; width: 3px; height: 0; background: #D50000; transform: translateY(-50%); transition: height .2s ease; } .elementskit-navbar-nav .elementskit-submenu-panel > li > a:hover::before { height: 60%; } .elementskit-navbar-nav .elementskit-submenu-panel > li > a:hover { padding-left: 28px; } */ /* --------------------------------------------------------------------------- 6) MOBIL PANEL HÁTTERE Van „wrapper_color_mobile" mező, DE a szelektora (.elementskit-menu-container) nincs médialekérdezéshez kötve, ezért asztali nézetben is befestené a menüsávot. Ugyanez a hiba okozta, hogy a „mobile panel width" asztalon 300px-re szorította a menüt. Ezért a mobil panel háttere csak így, médialekérdezésbe zárva adható meg biztonságosan: --------------------------------------------------------------------------- */ /* @media (max-width: 1024px) { .elementskit-menu-container { background-color: #111111; } .elementskit-navbar-nav > li > a { color: rgba(255, 255, 255, .86); border-bottom-color: rgba(255, 255, 255, .08) !important; } button.elementskit-menu-close { color: #FFFFFF; border-color: rgba(255, 255, 255, .25); } } */ /* --------------------------------------------------------------------------- 7) FEJLÉC ÖSSZEHÚZÁSA GÖRGETÉSKOR Nincs rá beállítás; JS is kell hozzá, ami görgetéskor rárak egy „is-scrolled" osztályt a fejléc konténerére. --------------------------------------------------------------------------- */ /* .bm-header-sticky.is-scrolled { min-height: 64px; } .bm-header-sticky.is-scrolled .elementskit-navbar-nav > li > a { padding-top: 20px; padding-bottom: 20px; } .bm-header-sticky.is-scrolled .elementor-widget-theme-site-logo img { width: 130px; transition: width .25s ease; } */