Header ausklappbare Kategorien - Breite ändern

[mrserious]

Hallo,

folgend in dem Bild sieht man mein Header mit einer ausklappbaren Kategorie. Nun würde ich gerne die breite des Kasten etwas ändern, damit es nicht so unverhältnismäßig aussieht. Bitte um Hilfe. Der rot markierte Bereich soll quasi entfernt werden. Ich benutze das DAWN Theme

https://okyu2r65o01nwflm-76869861716.shopifypreview.com 

[Gabe · Accepted solution]

Hey @mrserious 

Danke für den Preview Link und da das eine eigene Code Lösung im Header zu sein scheint, wäre hier einer unserer Shopify Frontend Developer der beste Ansprechpartner um das anzuschauen. Viel werden wir von hier aus nicht machen können wie du hoffentlich verstehen kannst. Ein paar Coding Tipps kann ich aber weiter unten abgeben die du in einer kopie des Themes zusammen mit einem Entwickler testen kannst.

Wenn du die Breite des Dropdown-Menüs verringern möchtest, musst du dies über CSS machen. Das derzeitige HTML habe ich dank deines Preview Links in der Chrome Developer Console analysiert und unten gepostet. Dieser gibt dir eine gute Vorstellung davon, welche Klassen du ansprechen musst, aber ohne den zugehörigen CSS ist es schwierig zu sagen, welche Änderungen du genau vornehmen musst:

<ul id="HeaderMenu-MenuList-1" class="header__submenu list-menu list-menu--disclosure color-scheme-ed675f60-b80c-4933-96d7-596c32ce426c gradient caption-large motion-reduce global-settings-popup" role="list" tabindex="-1"><li><a id="HeaderMenu-alle-produkte-hoodies" href="/collections/hoodies" class="header__menu-item list-menu__item link link--text focus-inset caption-large">
                        Hoodies
                      </a></li><li><a id="HeaderMenu-alle-produkte-half-zip" href="/collections/half-zip" class="header__menu-item list-menu__item link link--text focus-inset caption-large">
                        Half Zip
                      </a></li><li><a id="HeaderMenu-alle-produkte-sweaters" href="/collections/sweaters" class="header__menu-item list-menu__item link link--text focus-inset caption-large">
                        Sweaters
                      </a></li><li><a id="HeaderMenu-alle-produkte-t-shirts" href="/collections/t-shirts" class="header__menu-item list-menu__item link link--text focus-inset caption-large">
                        T-Shirts
                      </a></li><li><a id="HeaderMenu-alle-produkte-shorts" href="/collections/shorts" class="header__menu-item list-menu__item link link--text focus-inset caption-large">
                        Shorts
                      </a></li><li><a id="HeaderMenu-alle-produkte-caps" href="/collections/caps" class="header__menu-item list-menu__item link link--text focus-inset caption-large">
                        Caps
                      </a></li><li><a id="HeaderMenu-alle-produkte-beanies" href="/collections/beanies" class="header__menu-item list-menu__item link link--text focus-inset caption-large">
                        Beanies
                      </a></li></ul>

Du kannst versuchen, den folgenden CSS zu deinem Shopify-Thema hinzuzufügen, um die Breite des Dropdown-Menüs zu verringern:

.header__submenu.list-menu {
   width: auto; /* oder setze eine spezifische Breite, z.B. 250px; */
   max-width: 100%; /* Das stellt sicher, dass das Menü nicht breiter als sein Container wird. */
   padding-right: 15px; /* Das verringert den rechten Abstand, um leeren Raum zu reduzieren. */
}

Wenn das nicht funktioniert oder nicht den gewünschten Effekt hat, gibt es ein paar Dinge zu beachten:

1. Dein Theme könnte spezifischere CSS-Selektoren haben, die diese Änderungen überschreiben. Du könntest den CSS-Selektor in deinem Code anpassen müssen.
2. Wenn du nicht weißt, wie du CSS zu deinem Shopify-Theme hinzufügst, geh zu deinem Shopify-Adminbereich > Online Store > Themes > [dein aktives Thema] > Actions > Edit code. Hier kannst du zur base.css oder einem ähnlichen Stylesheet navigieren und den obigen CSS am Ende der Datei hinzufügen.

Wenn du immer noch Schwierigkeiten hast, empfehle ich dir wie oben bereits empfohlen, einen Entwickler oder einen Shopify-Experten um Hilfe zu bitten. Es gibt viele Variablen, die die Darstellung deines Menüs beeinflussen können.