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.
1

Mahlzeit,

ich habe ein Problem mit der Hintergrundfarbe meines Dropdown Menüs im Header. Den hätte ich gerne Transparent. Der scheint wohl gekoppelt an der “Haupthintergrundfarbe” zu sein.

Hat da jemand eine Lösung?

Ich danke im Voraus und verbleibe mit

besten Grüßen

Nico Heller

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.

3

Hey Gabe,

vielen Dank für Deine Hilfe. War schon am verzweifeln. Klappt alles wie gewünscht!

Beste Grüße

1 Like
4

Freut mich! :wink:

5

Gude Gabe,

vielen Dank! alles klappt nur habe ich das Problem das bei der Mobilen Ansicht der Image Banner trotz transparent dunkel wird… fyi habe ich zwei unterschiedliche Image Sizes für Desktop und Mobil Ansicht. Über eine Antwort würde ich mich sehr freuen