Einzelnen Menüpunkt nur im mobilen Menü anzeigen lassen

[Amoonic]

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

[Gabe]

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?

• www.taskhusky.com ist auch zu empfehlen.

[r8r · Accepted solution]

@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

[Gabe]

@r8r 

Erstklassige Hilfe Mario!

Top!

[Amoonic]

Hey Mario, 

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

1.000 Dank für deine Hilfe!

LG

Laura

[r8r]

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

Alles Liebe und viel Erfolg!
Mario