FROM CACHE - de_header

Einzelnen Menüpunkt nur im mobilen Menü anzeigen lassen

Gelöst
Amoonic
Neues Mitglied
3 0 2

Hallo an alle,

in unserem Shop (https://amoonic.de/) möchten wir in der Kategorie "Ringe" einen Menüpunkt lediglich im mobilen Menü anzeigen lassen, da das Mega Menü in der Desktop Ansicht bereits zu voll ist (hier würden wir dann einfach das Bild im Menü verwenden, um zu der entsprechenden Kategorie zu verlinken). 

Kennt ihr eine Möglichkeit, wie man einen Menüpunkt ausschließlich mobile erscheinen lassen kann?

Danke und viele Grüße 

Laura

1 AKZEPTIERTE LÖSUNG

Anerkannte Lösungen
r8r
Shopify Expert
2467 318 881

Erfolg.

@Amoonic – vor ein paar Tagen hab ich genau dasselbe in einem Prestige-Projekt gemacht.

Um das ohne Veränderungen an Deinem aktuellen HTML-/Liquid-Code bewerkstelligen zu können und nur CSS ergänzen zu müssen, musst du hier zwei Parameter wissen:

1.) Den wievielten Hauptmenüpunkt betrifft das Ganze? (Schmuck = 1, Ringe = 2, Verlobungsringe = 3, etc.).

2.) Wie ist der Titel (bzw. die entsprechende CSS-Klasse, die Du aus dem Quelltext der Seite rauslesen kannst) des Untermenüpunktes, den das betrifft.

Am Beispiel, dass Du den Unterpunkt "Karat" von "Verlobungsringe" ausblenden möchtest, wäre das der 3. Hauptmenüpunkt – merke: li:nth-child(3) – und die Klasse vom Unterpunkt .title-karat. In Summe ergibt sich dann die folgende Regel, mit der Du auf Desktop das "Karat"-Untermenü vom 3. Hauptmenüpunkt ausblenden kannst:

@media screen and (min-width: 1116px) {
  li:nth-child(3) div.MegaMenu__Item.MegaMenu__Item--fit.title-karat {
    display: none;
  }
}

Für andere Punkte kannst Du die Selektoren einfach duplizieren, mit Komma trennen, und die beiden Parameter anpassen. Z.B. so:

@media screen and (min-width: 1116px) {
  li:nth-child(2) div.MegaMenu__Item.MegaMenu__Item--fit.title-ringtyp,
  li:nth-child(2) div.MegaMenu__Item.MegaMenu__Item--fit.title-edelmetalle,
  li:nth-child(3) div.MegaMenu__Item.MegaMenu__Item--fit.title-karat {
    display: none;
  }
}

Ich hoffe, dass das hilft?
Mario

★ Ja, man kann mich buchen; schreib mir eine Nachricht!
★ Hinterlass gerne ein Like und markiere meine Antwort gegebenenfalls als Lösung. Ich freue ich mich immer über eine Spende an die (Kinder)krebshilfe oder eine kleine Aufmerksamkeit.
Studio Mitte

Lösung in ursprünglichem Beitrag anzeigen

5 ANTWORTEN 5
Gabe
Shopify Staff
Shopify Staff
8281 1280 2125

Hey Laura! @Amoonic 

Wow das ist ein klasse Shop. Wenn ich fragen darf, wie läufts? Was läuft gut und was nicht so? Was sind die Schmerzpunkte?

Dein Menü auf Handy zu einem Menüpunkt zu reduzieren ist natürlich ein toller Weg die Customer Experience auf Mobile zu verbessern, nur wird das eine komplexe Programmierung verlangen, wenn ich das richtig verstanden habe (so oder so).

Das folgende ist wie gesagt OHNE Gewähr und bitte in einer Theme Kopie testen, ansonsten einen Experten konsultieren

Man kann z. B. den Menüpunkt in den Navigations-Einstellungen bearbeiten, und eine Span Class wie '<span class="hide-mobile">NAME </span>' da hinzufügen. Dann ein Skript wie das folgende ganz unten einpflegen im theme.scss.liquid, aber ob klappt oder nicht kann ich nicht garantieren:

@media only screen and (max-width: 749px)
	.SidebarMenu__Nav .hide-mobile {
              display: none !important;
	}
}

Da obige Code versteckt einen bestimmten Menüpunkt auf Mobile aber ist ein Ansatz und kann ge-tweaked werden um nur bestimmte Menüpunkte zu "hiden". Es kommt natürlich auch auf das Theme drauf an denn alle Themes haben verschiedenen interne Code-Strukturen, wie du ja weißt.

  • Hast du mit deinen Theme Entwickler sprechen können diesbzgl.? Die haben oft ein paar Tricks im Ärmel.

Aber man sieht oben, dass dies ziemlich komplex ist und man fortgeschrittene Coding Kenntnisse haben sollte. Vielleicht kann hier einer unserer Experten helfen, wie @tewe oder @r8r?

 

Gabe | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog

r8r
Shopify Expert
2467 318 881

Erfolg.

@Amoonic – vor ein paar Tagen hab ich genau dasselbe in einem Prestige-Projekt gemacht.

Um das ohne Veränderungen an Deinem aktuellen HTML-/Liquid-Code bewerkstelligen zu können und nur CSS ergänzen zu müssen, musst du hier zwei Parameter wissen:

1.) Den wievielten Hauptmenüpunkt betrifft das Ganze? (Schmuck = 1, Ringe = 2, Verlobungsringe = 3, etc.).

2.) Wie ist der Titel (bzw. die entsprechende CSS-Klasse, die Du aus dem Quelltext der Seite rauslesen kannst) des Untermenüpunktes, den das betrifft.

Am Beispiel, dass Du den Unterpunkt "Karat" von "Verlobungsringe" ausblenden möchtest, wäre das der 3. Hauptmenüpunkt – merke: li:nth-child(3) – und die Klasse vom Unterpunkt .title-karat. In Summe ergibt sich dann die folgende Regel, mit der Du auf Desktop das "Karat"-Untermenü vom 3. Hauptmenüpunkt ausblenden kannst:

@media screen and (min-width: 1116px) {
  li:nth-child(3) div.MegaMenu__Item.MegaMenu__Item--fit.title-karat {
    display: none;
  }
}

Für andere Punkte kannst Du die Selektoren einfach duplizieren, mit Komma trennen, und die beiden Parameter anpassen. Z.B. so:

@media screen and (min-width: 1116px) {
  li:nth-child(2) div.MegaMenu__Item.MegaMenu__Item--fit.title-ringtyp,
  li:nth-child(2) div.MegaMenu__Item.MegaMenu__Item--fit.title-edelmetalle,
  li:nth-child(3) div.MegaMenu__Item.MegaMenu__Item--fit.title-karat {
    display: none;
  }
}

Ich hoffe, dass das hilft?
Mario

★ Ja, man kann mich buchen; schreib mir eine Nachricht!
★ Hinterlass gerne ein Like und markiere meine Antwort gegebenenfalls als Lösung. Ich freue ich mich immer über eine Spende an die (Kinder)krebshilfe oder eine kleine Aufmerksamkeit.
Studio Mitte
Gabe
Shopify Staff
Shopify Staff
8281 1280 2125

@r8r 

Erstklassige Hilfe Mario!

Top!

Gabe | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog

Amoonic
Neues Mitglied
3 0 2

Hey Mario, 

wow, hat direkt funktioniert, obwohl ich mich recht wenig im Code auskenne.

1.000 Dank für deine Hilfe!

LG

Laura

r8r
Shopify Expert
2467 318 881

Gerne Laura – danke für die Rückmeldung. Freut mich, dass das gleich funktioniert hat!

Alles Liebe und viel Erfolg!
Mario

★ Ja, man kann mich buchen; schreib mir eine Nachricht!
★ Hinterlass gerne ein Like und markiere meine Antwort gegebenenfalls als Lösung. Ich freue ich mich immer über eine Spende an die (Kinder)krebshilfe oder eine kleine Aufmerksamkeit.
Studio Mitte