/*********************************************/ /* Hauptmenü – 1. Ebene */ /*********************************************/ /* Schrift, Größe und Gewichtung der obersten Menü-Ebene. * Werte orientieren sich 1:1 am SV-Original (schaeferhunde.de, * Selektor ".nav-primary > li > a"). Der Selektor "> ul > li > a" * trifft ausschließlich die direkten Kinder der obersten Menü- * Liste – Submenüs werden separat gestylt. */ .main-navigation .main-nav > ul > li > a { font-family: 'Roboto Slab', serif; font-size: 18px; font-weight: bold; } /* Aktive und Hover-Farbe in der obersten Ebene: Vereins-Grün. * * Deckt die gleichen Zustaende ab wie die Subnav-Regel weiter unten: * :hover / :focus / sfHover – Zeigerzustaende * [class*="current-menu-"] – aktive Seite oder Vorfahr * * Spezifitaet absichtlich ueber "body" sowie das Muster * ":not([class*=\"current-menu-\"])" angehoben, damit die Regel * GeneratePress' dynamisches Customizer-CSS schlaegt. GP setzt * ".main-navigation .main-nav ul li:not([class*=\"current-menu-\"]):hover > a" * (0,4,4) per Inline-Style im Head – ohne die gleiche Struktur * hier zu spiegeln wuerde die GP-Regel (haeufig Blau ueber * var(--accent)) auch im Top-Level gewinnen. */ body .main-navigation .main-nav > ul > li:not([class*="current-menu-"]):hover > a, body .main-navigation .main-nav > ul > li:not([class*="current-menu-"]):focus > a, body .main-navigation .main-nav > ul > li.sfHover:not([class*="current-menu-"]) > a, body .main-navigation .main-nav > ul > li[class*="current-menu-"] > a { color: #5a9e33; } /* Dropdown-Pfeile (▾ / ▸) in allen Ebenen vollständig ausblenden. * GeneratePress nutzt für die Pfeile ein * innerhalb des Links bzw. den Toggle-Button ".dropdown-menu-toggle" * in der mobilen Ansicht. Pseudo-Elemente werden hier bewusst NICHT * geblockt, weil das Dropdown-Trennlinie-Styling weiter unten ein * ::after-Pseudo-Element nutzt. */ .main-navigation .menu-item-has-children .dropdown-menu-toggle, .main-navigation .menu-item-has-children > a .gp-icon { display: none !important; } /*********************************************/ /* Hauptmenü – 2. und 3. Ebene (Dropdown) */ /*********************************************/ /* Container des Dropdowns – weißer Hintergrund mit kräftigem * Schatten, damit sich das Menü deutlich vom Seiteninhalt absetzt. */ .main-navigation .main-nav ul ul { background-color: #ffffff; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); min-width: 250px; } /* Top-Level-Dropdowns 11px hoeher positionieren (Vorgabe Nutzer, * in mehreren Schritten: 5px + 3px + 3px). Gilt NUR fuer das * Dropdown direkt unter einem Top-Level-Menuepunkt * (".main-nav > ul > li > ul"); Flyouts (Sub-Sub-Menues) bleiben * unberuehrt, damit deren vertikale Ausrichtung am Parent-Item * erhalten bleibt. */ .main-navigation .main-nav > ul > li > ul { margin-top: -11px; } /* Einzelne Dropdown-Menüpunkte – Schrift, Größe, Abstände. * "position: relative" ist Voraussetzung für das absolut * positionierte ::after (Trennlinie), das darüber definiert wird. * * Farbe #555555 = gleicher Ton wie der Body-Text (typography.css), * damit ungehoverte Dropdown-Links optisch zur Seite passen. */ .main-navigation .main-nav ul ul li a { color: #555555; font-family: 'Roboto Condensed', sans-serif; font-size: 18px; padding: 8px 20px; position: relative; transition: color 0.3s; } /* Trennlinie zwischen Dropdown-Einträgen als Pseudo-Element, * damit sie links/rechts eingezogen gezeichnet werden kann und * nicht bis an die Ränder des Links reicht. */ .main-navigation .main-nav ul ul li > a::after { content: ''; position: absolute; left: 15px; right: 15px; bottom: 0; height: 1px; background-color: #bbbbbb; } /* Letztes Submenü-Item jeder Ebene ohne Trennlinie */ .main-navigation .main-nav ul ul li:last-child > a::after { display: none; } /* Hover- und aktiver Zustand im Dropdown: Vereins-Grün. * * Deckt saemtliche Zustaende ab, die Grün werden sollen: * :hover / :focus – Zeigerzustaende * sfHover – von GP per JS gesetzt (Touch etc.) * [class*="current-menu-"] – matcht current-menu-item / * current-menu-ancestor / * current-menu-parent (gleich wie * GeneratePress es selbst macht) * * BEWUSST KEIN :visited: * :visited ist KEIN Pointer-State – der Selektor matcht alle Links, * deren URL der Browser in der History hat. Das wuerde besuchte * Dropdown-Eintraege dauerhaft gruen einfaerben (auf dem Dev-System * sehr schnell ALLE Eintraege, weil im Test alles angeklickt wird) * und die "ungehovert = grau, gehovert = gruen"-Logik komplett * aushebeln. Visited-Links sehen damit aus wie der Default * (#555555 aus der Regel weiter oben). * * Spezifitaet absichtlich ueber "body" erhoeht, damit die Regel * GeneratePress' dynamisches Customizer-CSS schlaegt. GP setzt * ".main-navigation .main-nav ul ul li[class*=\"current-menu-\"] > a" * via Inline-Style im Head – gleiche Selektor-Spezifitaet. Durch * den zusaetzlichen "body"-Typ gewinnen wir. */ body .main-navigation .main-nav ul ul li:not([class*="current-menu-"]):hover > a, body .main-navigation .main-nav ul ul li:not([class*="current-menu-"]):focus > a, body .main-navigation .main-nav ul ul li.sfHover:not([class*="current-menu-"]) > a, body .main-navigation .main-nav ul ul li[class*="current-menu-"] > a { color: #5a9e33; background-color: transparent; } /*********************************************/ /* Ausrichtung der Dropdown-Menues */ /* */ /* Vorgabe: */ /* - 1. Top-Level-Menuepunkt (linkester): */ /* Dropdown-Eintraege linksbuendig */ /* (= Standard, keine extra Regel noetig). */ /* - Alle weiteren Top-Level-Menuepunkte: */ /* Dropdown-Eintraege rechtsbuendig, */ /* Flyouts (Sub-Sub-Menues) oeffnen nach */ /* links statt rechts und sind ebenfalls */ /* rechtsbuendig. */ /* */ /* Selektor-Logik: */ /* ".main-nav > ul > li:not(:first-child)" */ /* trifft alle direkten Kinder der obersten */ /* Menueliste AUSSER dem ersten. Alles */ /* Folgende ist relativ zu diesen Zweigen */ /* formuliert und laesst den 1. Zweig */ /* (Unser Verein) unberuehrt. */ /*********************************************/ /* Rechtsbuendiger Text in allen Dropdown-Ebenen der nicht-ersten * Top-Level-Zweige. Gilt fuer 2. UND 3. Ebene. */ .main-navigation .main-nav > ul > li:not(:first-child) ul li a { text-align: right; } /* Parent-Items (mit Flyout) erhalten von GeneratePress per Default * "padding-right: 0", um Platz fuer den Dropdown-Pfeil zu schaffen. * Da wir die Pfeile versteckt haben (s.o.) und die Eintraege rechts- * buendig darstellen wollen, stellen wir das Standard-Padding (20px) * wieder her, damit der Text nicht an den Containerrand stoesst. */ .main-navigation .main-nav > ul > li:not(:first-child) ul li.menu-item-has-children > a { padding-right: 20px; } /* Flyouts der 3. Ebene in diesen Zweigen nach LINKS oeffnen. * * Wichtig: GeneratePress setzt beim Hover/.sfHover dynamisch * left: 100%; top: 0; * auf das Flyout (Spezifitaet 0,3,4 – siehe parent-theme all.css). * Unsere statische Regel fuer ".main-nav > ul > li:not(:first-child) * ul ul" wird davon ueberschrieben. Daher muss die Gegen-Regel * ebenfalls den Hover-Zustand adressieren und hoehere Spezifitaet * haben. */ .main-navigation .main-nav > ul > li:not(:first-child) ul ul { left: auto; right: 100%; } .main-navigation:not(.toggled) .main-nav > ul > li:not(:first-child) ul li:hover > ul, .main-navigation:not(.toggled) .main-nav > ul > li:not(:first-child) ul li.sfHover > ul { left: auto; right: 100%; top: 0; } /* Top-Level-Dropdown rechtsbuendig am Parent-Menuepunkt ausrichten * (nur fuer die rechtsbuendigen Menues, d.h. ab dem 2. Top-Level- * Eintrag). Greift ausschliesslich im Hover-Zustand, damit die * GeneratePress-Versteckregel "left: -99999px" im Ruhezustand * erhalten bleibt. Hoehere Spezifitaet als GP's Default-Regel * (siehe all.css: ".main-navigation:not(.toggled) ul li:hover > ul"). */ .main-navigation:not(.toggled) .main-nav > ul > li:not(:first-child):hover > ul, .main-navigation:not(.toggled) .main-nav > ul > li:not(:first-child).sfHover > ul { left: auto; right: 0; } /*********************************************/ /* Bündige rechte Kante: Hauptmenü + Suchfeld */ /* mit Top-Bar (Facebook/Instagram) abgleichen */ /* */ /* Hintergrund: */ /* - GP gibt .inside-header einen Innen- */ /* abstand von 20px 40px (siehe parent */ /* main.min.css). Die .main-navigation */ /* läuft als Flex-Item nur bis zum Content- */ /* Edge und endet damit 40px vor der */ /* äußeren rechten Kante des Headers. */ /* - Die Top-Bar (.og-top-bar) ist absolute */ /* mit "right: 0" zur Padding-Box von */ /* .inside-header positioniert und sitzt */ /* deshalb an der ÄUSSEREN Header-Kante. */ /* - GP gibt jedem Top-Level- 20px */ /* Padding-rechts; das letzte Item endet */ /* optisch nochmal 20px vor der Nav-Kante. */ /* */ /* Strategie: Negativer margin-right auf */ /* .main-navigation (in nav-float-right) */ /* gleicht die 40px Header-Padding aus, das */ /* letzte Top-Level-Item bekommt padding- */ /* right: 0 – damit fluchtet "Kontakt" mit der */ /* rechten Kante der Top-Bar-Icons. Das */ /* Suchfeld wird per "right: 0" an dieselbe */ /* (jetzt verschobene) rechte Kante der Nav */ /* gepinnt und liegt damit ebenfalls bündig. */ /*********************************************/ /* Hauptnavigation in nav-float-right bis an die äußere rechte * Kante des Headers ziehen. -40px entspricht exakt dem * padding-right von .inside-header (GP-Default). Wirkung * beschränkt auf nav-float-right, damit Layouts mit Nav * unterhalb des Headers (volle Breite) unangetastet bleiben. * * Nur >=769px: Auf Mobile (<=768px) klappt GP die .inside- * header-Flexbox in column-Richtung um und die Navigation * läuft volle Breite – ein negativer margin-right würde dort * den Viewport sprengen und horizontales Scrollen erzeugen. */ @media (min-width: 769px) { .nav-float-right .main-navigation { margin-right: -20px; } } /* Letztes Top-Level-Menü-Item ohne rechtes Innen-Padding, * damit der Linktext (z. B. "Kontakt") exakt bündig zur * rechten Header-Kante steht – auf gleicher Linie wie das * Instagram-Icon der Top-Bar. */ .main-navigation .main-nav > ul > li:last-child > a { padding-right: 0; } /*********************************************/ /* CSS für Suchfeld unterhalb des Hauptmenüs */ /* Übernommen aus SV-Site (sv-layout) */ /*********************************************/ /* Hauptnavigation relativ positionieren, damit das absolut */ /* positionierte Suchfeld sich an ihr ausrichten kann */ .main-navigation { position: relative; } /* Positionierung des Suchfelds: bündig zur rechten Nav-Kante. * Zusammen mit dem negativen margin-right auf .main-navigation * (siehe oben) liegt das Suchfeld exakt unter der Top-Bar bzw. * dem Instagram-Icon. */ .below-menu-search { position: absolute; right: 0; top: 100%; margin-top: -10px; background-color: transparent; } /* Form-Container */ .below-menu-search .search-form { display: flex; align-items: center; max-width: 250px; } /* Suchfeld Styling */ .below-menu-search input[type="search"] { width: 200px; padding: 5px 10px; border: 1px solid #898989; border-right: none; border-radius: 3px 0 0 3px; font-size: 14px; height: 29px; transition: all 0.3s ease; } /* Suchfeld Focus-Zustand */ .below-menu-search input[type="search"]:focus { outline: none; border-color: #37AAE1; box-shadow: -3px 0 5px -2px rgba(55, 170, 225, 0.4), 0 -3px 5px -2px rgba(55, 170, 225, 0.4), 0 3px 5px -2px rgba(55, 170, 225, 0.4); } /* Placeholder Styling */ .below-menu-search input[type="search"]::placeholder { color: #5a9e33; font-size: 12px; font-weight: 700; } /* Such-Button mit Lupe */ .below-menu-search button.search-submit { padding: 5px 10px; margin-left: 0; height: 29px; background-color: #5a9e33; color: #ffffff; border: 1px solid #5a9e33; border-radius: 0 3px 3px 0; cursor: pointer; display: flex; align-items: center; justify-content: center; } /* Such-Button Hover */ .below-menu-search button.search-submit:hover { background-color: #4a8229; } /* Dashicon Styling (Lupe im Button) */ .below-menu-search .dashicons-search { font-size: 16px; width: 16px; height: 16px; color: #ffffff; } /* Mobile Ansicht */ @media (max-width: 768px) { .below-menu-search { position: relative; right: auto; top: auto; display: flex; justify-content: center; padding: 10px; margin-top: 0; } .below-menu-search input[type="search"] { width: 100%; max-width: 300px; } }