# Farben Flyout Menü ändern

**URL:** <https://forum.shopware.com/t/farben-flyout-menue-aendern/105416>\
**Category:** Shopware 6 (German)\
**Created:** [3. Oktober 2024 um 17:56 UTC](https://forum.shopware.com/t/farben-flyout-menue-aendern/105416 "2024-10-03T17:56:52Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![Mr\_X](https://avatars.discourse-cdn.com/v4/letter/m/22d042/32.png) [@Mr\_X](https://forum.shopware.com/u/Mr_X)\
**Post date:** [3. Oktober 2024 um 17:56 UTC](https://forum.shopware.com/t/farben-flyout-menue-aendern/105416/1 "2024-10-03T17:56:52Z")

</div>

Hallo zusammen,  
ich finde leider nicht die CSS-Datei in der ich das flyout Menü farblich ändern kann.Ich würde gerne den Hintergrund von Weiß auf Schwarz ändern. Könnt ihr mir helfen?

---

<div class="post-metadata">

**Author:** ![Mr\_X](https://avatars.discourse-cdn.com/v4/letter/m/22d042/32.png) [@Mr\_X](https://forum.shopware.com/u/Mr_X)\
**Post date:** [3. Oktober 2024 um 17:58 UTC](https://forum.shopware.com/t/farben-flyout-menue-aendern/105416/2 "2024-10-03T17:58:03Z")

</div>

Ich habe im github noch gelesen, dass es jetzt die Datei navbar.html.twig für das Menü sei. Aber auch das hat mir bei den Farben nicht weitergeholfen …

---

<div class="post-metadata">

**Author:** ![sschreier](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/sschreier/32/23296_2.png) [@sschreier](https://forum.shopware.com/u/sschreier)\
**Post date:** [3. Oktober 2024 um 18:56 UTC](https://forum.shopware.com/t/farben-flyout-menue-aendern/105416/3 "2024-10-03T18:56:39Z")

</div>

Hallo,

wenn du die Änderung nicht bei jedem Update erneut machen möchtest, solltest du schon einmal keine Dateien von Shopware ändern.

CSS-Anpassungen aber auch alle anderen Anpassungen, die updatesicher sein sollen, gehören in ein eigenes Theme, siehe: [Add SCSS Styling and JavaScript to a Theme | Shopware Documentation](https://developer.shopware.com/docs/guides/plugins/themes/add-css-js-to-theme.html#adding-custom-scss) .

Grüße  
Sebastian

---

<div class="post-metadata">

**Author:** ![Mr\_X](https://avatars.discourse-cdn.com/v4/letter/m/22d042/32.png) [@Mr\_X](https://forum.shopware.com/u/Mr_X)\
**Post date:** [3. Oktober 2024 um 19:23 UTC](https://forum.shopware.com/t/farben-flyout-menue-aendern/105416/4 "2024-10-03T19:23:10Z")

</div>

Hallo Sebastian,

Das ist mir bekannt. Ich habe bereits ein eigenes Theme erstellt und such jetzt die Möglichkeiten für die farblichen Änderungen im Menü.

VG

---

<div class="post-metadata">

**Author:** ![WebentwicklSchaefer](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/webentwicklschaefer/32/27230_2.png) [@WebentwicklSchaefer](https://forum.shopware.com/u/WebentwicklSchaefer)\
**Post date:** [4. Oktober 2024 um 05:25 UTC](https://forum.shopware.com/t/farben-flyout-menue-aendern/105416/5 "2024-10-04T05:25:17Z")

</div>

Hallo @Mr_X,

du kannst deine Anpassungen über .scss machen. Die base.scss ist der Einsprungpunkt bei dir im Theme, sofern es bei dir aktuell noch alles dem Standard entspricht.

 ![image](https://europe1.discourse-cdn.com/flex013/uploads/shopware/original/3X/6/4/6412085e556922bd1452d19e12ac6eb80560c846.png)

Dort kannst du jetzt Dateien per @import einfügen - ist technisch kein muss (du könntest theoretisch auch alles in diese base.scss schreiben) - Es ist aber sinnvoll das so zu machen und an der Struktur von Shopware zu halten.

Über deinen Browser suchst du die Klassen und trägst sie hier ein.

Danach über die Konsole **php bin/console theme:compile** damit deine Änderungen auch greifen. Manchmal ist Shopware sehr hartnäckig (aktuelle Versionen und Chrome) - betrifft aber eher Template-Anpassungen - dann könntest du noch ein **php bin/console cache:clear** eintragen.

Wenn du weiterführende Unterstützung benötigst kannst du dich auch gerne per PN oder über meine Website (im Profil verlinkt) bei mir melden.

Viele Grüße  
Marco

---

<div class="post-metadata">

**Author:** ![Mr\_X](https://avatars.discourse-cdn.com/v4/letter/m/22d042/32.png) [@Mr\_X](https://forum.shopware.com/u/Mr_X)\
**Post date:** [4. Oktober 2024 um 06:51 UTC](https://forum.shopware.com/t/farben-flyout-menue-aendern/105416/6 "2024-10-04T06:51:24Z")

</div>

Hallo Marco,

Vielen Dank für deine Antwort. Genau so habe ich es bisher gemacht. Hag auch für alle meine Anpassjngen wunderbar funktioniert.  
Leider habe ich nicht raus bekommen, welche Klassen im flyout Menü verwendeh werden. Ich glaube ich war nicht präzise genug mit meiner Frage. Bitte entschuldigt!

Könnt ihr mir da helfen? F12 im Chrome zeigt es mir leider nicht an.

VG

---

<div class="post-metadata">

**Author:** ![WebentwicklSchaefer](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/webentwicklschaefer/32/27230_2.png) [@WebentwicklSchaefer](https://forum.shopware.com/u/WebentwicklSchaefer)\
**Post date:** [4. Oktober 2024 um 08:15 UTC](https://forum.shopware.com/t/farben-flyout-menue-aendern/105416/7 "2024-10-04T08:15:11Z")

</div>

Hallo @Mr_X,

der Container hat die Klasse „.navigation-flyouts“.

VG

---

<div class="post-metadata">

**Author:** ![Mr\_X](https://avatars.discourse-cdn.com/v4/letter/m/22d042/32.png) [@Mr\_X](https://forum.shopware.com/u/Mr_X)\
**Post date:** [4. Oktober 2024 um 09:03 UTC](https://forum.shopware.com/t/farben-flyout-menue-aendern/105416/8 "2024-10-04T09:03:10Z")

</div>

Super, vielen Dank !!!

---

<div class="post-metadata">

**Author:** ![Mr\_X](https://avatars.discourse-cdn.com/v4/letter/m/22d042/32.png) [@Mr\_X](https://forum.shopware.com/u/Mr_X)\
**Post date:** [4. Oktober 2024 um 09:13 UTC](https://forum.shopware.com/t/farben-flyout-menue-aendern/105416/9 "2024-10-04T09:13:01Z")

</div>

Ok, I habe die Klasse gefunden. Allerdings auch diesen Hinweis.

\*\*

- @deprecated tag:v6.7.0 - The complete navigation-flyout.scss file will be removed without replacement.
- Starting with v6.7.0, the navigation flyout is implemented in the template with bootstrap.
- See: src/Storefront/Resources/views/storefront/layout/navbar/navbar.html.twig  
\*/

Im neuen navbar habe ich kein flyout mehr gefunden. Dafür steht dort class="dropdown-menu. Ist das die richtige Klasse?

---

<div class="post-metadata">

**Author:** ![WebentwicklSchaefer](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/webentwicklschaefer/32/27230_2.png) [@WebentwicklSchaefer](https://forum.shopware.com/u/WebentwicklSchaefer)\
**Post date:** [4. Oktober 2024 um 09:35 UTC](https://forum.shopware.com/t/farben-flyout-menue-aendern/105416/10 "2024-10-04T09:35:33Z")

</div>

Die genannte Klasse war richtig. Da musst du beim 6.7 Update aufpassen und dann nochmal anpassen.

---

<div class="post-metadata">

**Author:** ![Mr\_X](https://avatars.discourse-cdn.com/v4/letter/m/22d042/32.png) [@Mr\_X](https://forum.shopware.com/u/Mr_X)\
**Post date:** [4. Oktober 2024 um 10:09 UTC](https://forum.shopware.com/t/farben-flyout-menue-aendern/105416/11 "2024-10-04T10:09:04Z")

</div>

Alles klar, vielen Dank !

---

<div class="post-metadata">

**Author:** ![system](https://europe1.discourse-cdn.com/flex013/uploads/shopware/original/3X/2/9/29c7587ba660f00e4995d1743162782e5d6d8653.svg) [@system](https://forum.shopware.com/u/system)\
**Post date:** [16. November 2024 um 15:55 UTC](https://forum.shopware.com/t/farben-flyout-menue-aendern/105416/12 "2024-11-16T15:55:09Z")

</div>

Dieses Thema wurde automatisch 30 Tage nach der letzten Antwort geschlossen. Es sind keine neuen Antworten mehr erlaubt.
