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
Gelöst! Zur Lösung
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
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.
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
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
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
Hey Mario,
wow, hat direkt funktioniert, obwohl ich mich recht wenig im Code auskenne.
1.000 Dank für deine Hilfe!
LG
Laura
Gerne Laura – danke für die Rückmeldung. Freut mich, dass das gleich funktioniert hat!
Alles Liebe und viel Erfolg!
Mario