Menü in der Mobile Ansicht schmaler machen

[SINRELLA]

Schönen Guten Morgen. Ich benutze das Craft Theme und richte mir grad mein Menü selbst ein mit der App ANG Extra Menü. Ich suche zu der App hier kein Support ich möchte generell wissen ob man sein Menu ( Shopify Menü ) Mobile ansicht, so einstellen kann das es nicht über die ganze Seite geht wenn man es öffnet . Ich hatte gehofft das ich das mit einer App hin bekomme aber leider nicht . Die Screenshots zeigen einmal mein Menü und einmal wie ich es gerne hätte . Ich sage schon mal vielen lieben Dank im Vorraus .
Meins:

wie ich es gerne hätte von der Breite ( Mobile Ansicht )

[Gabe]

Hey @SINRELLA

Danke für die Fragen und bei so einem Fall wäre ein befristeter Vorschaulink zu einem Beispiel sehr hilfreich das schneller zu analysieren.

Aber im Groben, um das Menü in der mobilen Ansicht deines Shopify-Shops so anzupassen, dass es nicht über den gesamten Bildschirm geht, kannst du folgende Schritte unternehmen:

CSS-Anpassungen: Die einfachste Methode ist, das CSS deines Shopify-Themes zu bearbeiten. Du kannst die Breite des Menüs mit einer maximalen Breite (max-width) begrenzen oder die Breite in Prozent angeben, sodass das Menü nur einen Teil des Bildschirms einnimmt. Hier ist ein Beispiel für eine CSS-Regel, die du deinem Theme Editor hinzufügen könntest:

.mobile-nav {
  width: 80%; /* oder eine andere Prozentzahl für die gewünschte Breite */
  max-width: 300px; /* optional, um eine maximale Breite festzulegen */
}

Hier eine weitere Möglichkeit:

.menu-drawer {
   width: 50% !important;
}

Dieser Code setzt die Breite des Menü-Containers auf 50% der Bildschirmbreite.

Bitte beachte, dass der genaue Klassenname .menu-drawer von deinem spezifischen Theme abweichen kann. Überprüfe daher die Klassennamen in deinem Theme, bevor du die Änderungen vornimmst.

Für eine visuelle Anleitung, wie man die mobile Ansicht auf Shopify bearbeitet, bietet ShopiBuffet eine schrittweise Anleitung, die dir zeigt, wie du verschiedene Elemente deines Shops für Mobilgeräte optimieren kannst, einschließlich der Anpassung des Layouts für mobile Ansichten innerhalb der Theme-Anpassungsoptionen.

Anpassungen im Theme-Editor: Einige Shopify-Themes bieten Einstellungen im Theme-Editor, mit denen du das Layout und das Verhalten des mobilen Menüs ändern kannst. Überprüfe die Theme-Einstellungen und schau nach, ob es Optionen für das mobile Menü gibt.

Verwendung von Shopify-Apps: Wenn du eine App wie ANG Extra Menü verwendest, prüfe die App-Einstellungen, ob es eine Möglichkeit gibt, das Layout des Menüs für mobile Geräte anzupassen.

Hoffe das hilft dir weiter - lass wissen falls nicht!

---

Habt ihr auch den Shop auf den Valentinstag ? umgestellt? Jetzt ist die Zeit wo Online Shopper nach für ihre !

Hast du weitere Fragen zum Shop? Gebe einfach ein Suchbegriff oben in der Suchleiste der Community Landingpage ein, denn das Thema haben wir sehr wahrscheinlich schon besprochen. Halte bitte Ausschau in deiner E-Mail auf Notifications zu Antworten auf deine Fragen in der Community.

[SINRELLA]

Hallo und herzlichen Dank . Es funktioniert. Ich habe aber noch andere Probleme . Wenn es hier nicht hin gehört bitte sagen . Sie bekomme ich aus dem Menü die Währung und die Länder raus ? Das muss man leider auch per Code machen . Im Mobile Header Menü ist das sichtbar vor dem Konto Login . Und bei mir wird leider nicht Apple Pay angezeigt aus was für ein Grund auch immer . Ich sage vielen Dank im Vorraus und lieben Gruß

[Gabe]

Hey @SINRELLA

Freut mich, dass das geholfen hat!

Und bzgl. Apple Pay, es erscheint nur auf iPhone oder iPad. ISt das Problem da auch vorhanden dann bitte den Apple Pay Support kontaktieren über deinen Apple Pay Account denn ggf. hat Apple einfach nicht diesen Digital Wallet für dein Shop freigeschaltet aus irgendeinem Grund.

Und du möchtest aus dem Menü die Währung und die Länder rausbekommen. Ist das nur aus dem Mobile Header und nicht Desktop und hast du mit den App Entwickler darüber gesprochen? Wenn ja, dann um die Anzeige von Währungs- und Ländereinstellungen im mobilen Menü zu entfernen, kannst du einen CSS wie den folgenden testen:

@media only screen and (max-width:989px){
    .menu-drawer__localization.header-localization {
        display: none;
    }
}

Dieser Code sollte die Elemente für Währung und Land nur in der mobilen Ansicht ausblenden.

Hoffe das hilft dir weiter - lass wissen falls nicht!

[SINRELLA]

Hey danke sehr ich möchte das aus beiden entfernen also Desktop und mobil. Das ist auch sichtbar ohne die App leider . Ich hätte ja auch gerne zwischen den Menüpunkten so Linien aber das ist wohl mit der App leider nicht machbar wie ich es gesehen haben bzw mich gesehen habe . Freundliche Grüße sende ich

[SINRELLA]

Hey herzlichen Dank nochmal für den Code. Aber welchen Code müsste ich nehmen wenn ich es auch auf dem Desktop ausblenden lassen möchte ?
Liebe Grüße und einen schönen Tag wünsche

[Gabe]

Hey @SINRELLA

Wie du siehst ist das ganze nicht so einfach denn eine Änderung, zu wie dein Shop auf Mobile aussieht hat auch weitreichende Auswirkungen auf Desktop und vice versa. Ich könnte dir einen Code für Desktop geben aber dann zerschießt du u. U. wieder die Ansicht auf Mobile, aber nur im schlimmsten Fall. Somit ist es wichtig, das mit einem Experten zu machen, der oder die einen näheren in dein Theme Code werfen kann. Das ist hier, wie gesagt, zu empfehlen! Es ist außerdem wichtig, den CSS Editor innerhalb des Theme Editors dafür zu verwenden als Failsafe für deinen Code!

Aber im grossen und ganzen, um das Menü sowohl in der mobilen als auch in der Desktop-Ansicht deines Shopify-Shops auszublenden, kannst du eine zusätzliche Media Query wie @media (max-width: 992px) { verwenden, die die Sichtbarkeit des Menüs auf beiden Gerätetypen steuert. Hier ein Beispiel:

@media (max-width: 992px) {
 .mobile-nav, .menu-drawer {
   display: none; /* Versteckt das Menü in der mobilen Ansicht */
 }
}

@media (min-width: 993px) {
 .desktop-nav, .menu-drawer {
   display: none; /* Versteckt das Menü in der Desktop-Ansicht */
 }
}

In diesem Beispiel bestimmen die Media Queries wann das Menü ausgeblendet werden soll:

• Die erste Regel (@media (max-width: 992px)) wendet sich an Geräte mit einer Bildschirmbreite von maximal 992 Pixeln, was üblicherweise Tablets und Smartphones umfasst. Hier wird das Menü in der mobilen Ansicht ausgeblendet.
• Die zweite Regel (@media (min-width: 993px)) zielt auf Geräte mit einer Bildschirmbreite von mehr als 992 Pixeln ab, was typischerweise Desktop-Bildschirme einschließt. Dies sorgt dafür, dass das Menü auch in der Desktop-Ansicht nicht sichtbar ist.

Beachte, dass .mobile-nav und .menu-drawer Beispiele für Klassen sind, die dein spezifisches Menü identifizieren. .desktop-nav ist ein Platzhalter für die CSS Klasse, die dein Desktop-Menü identifiziert.

WICHTIG: Du musst diese Klassennamen durch die tatsächlichen CSS Class in deinem Theme ersetzen, um das korrekte Menü zu identifizieren.

Wenn du das Menü komplett ausblenden möchtest, unabhängig von der Bildschirmgröße, kannst du auch einfach folgenden CSS-Code verwenden:

.mobile-nav, .menu-drawer, .desktop-nav {
  display: none;
}

Dieser Code blendet das Menü unabhängig von der Bildschirmgröße aus. Du musst nur die richtigen Klassennamen verwenden, um deinen Anforderungen zu entsprechen.

Hoffe das hilft dir weiter - lass wissen falls nicht!

[SINRELLA]

Hey und vielen Dank. Der Code blendet das ganze Menü aus . Es ging darum die Währung und die Länder aus den Menüs ( Mobile und Desktop ) zu entfernen , siehe Foto . Du hattest mir einen Code geschickt hier wo du sagtest das es nur auf Mobile dann ausgeblendet ist und ich darauf das ich ein brauche wo bei beiden aisgeblendet ist . Ich möchte mein Menü nicht ausblenden . Sondern nur die Länder und die Währung aus dem Mobile Menü und Desktop. Besten dank dir