Dropdown Menü transparent

Deutsch Diskussion Technische Fragen & Antworten

Topic summary

Problem: Ein Nutzer möchte die Hintergrundfarbe des Dropdown-Menüs im Header transparent gestalten, die standardmäßig an die Haupthintergrundfarbe gekoppelt ist.

Lösung:

  • Erfordert CSS-Anpassungen in der Datei assets/theme.css
  • Verschiedene Code-Varianten wurden vorgeschlagen, abhängig vom Theme-Typ:
    • ul.dropdown.js-dropdown { background-color: transparent !important; }
    • .dropdown { background: transparent; }
    • Weitere theme-spezifische Selektoren
  • Empfehlung: Änderungen zunächst in einer Testumgebung testen

Status: Die ursprüngliche Anfrage wurde erfolgreich gelöst.

Offenes Problem: Ein weiterer Nutzer meldet, dass bei mobiler Ansicht der Image Banner trotz transparentem CSS dunkel wird, obwohl unterschiedliche Bildgrößen für Desktop und Mobil verwendet werden. Diese Frage bleibt unbeantwortet.

Summarized with AI on October 30. AI used: claude-sonnet-4-5-20250929.
2

Hey Nico! @CaliWorld

Danke für die Frage und wenn du deine Shop URL hier postest (kannst du danach gleich wieder natürlich löschen) dann kann das helfen das Problem schneller zu analysieren und ein hin-und-her mit mehr Fragen verhindern.

Die meisten Menü-dropdowns sind in der Tat opak von Haus aus und gleich mit der Background Farbe auf Theme-kopfebene (Parent). Willst du aber, dass die Dropdowns einen transparenten HG haben, dann wird das etwas Coding Kenntnisse verlangen wenn man das DIY machen möchten. Ansonsten empfehle ich einen Experten zu engagieren.

DIY (das folgende am besten in einer Testumgebung testen und ist, wie gesagt, ohne Gewähr**)**

Du kannst z. B. einen Code wie den folgenden im assets/theme.css ganz unten einpflegen:

ul.dropdown.js-dropdown {
    background-color: transparent !important;
}

Das Code ist je nach Theme Typ anders, wie z. B.:

.dropdown {
  background: transparent;
}

ul.dropdown  {
    background : transparent !important;
}

.header--mega.header--center .primary-nav .nav__sub {
    background: #fff;
}

Im letzten Beispiel hier ^^ habe ich vergessen transparent als BG einzutragen. Mehr zum !important Tag hier.