Mobile Navigation Probleme Dawn Theme

[yzarda]

Hey, ich habe auf der Mobile Navigation ein Problem. Ich habe die Navigationsansicht so umgestellt das die width 80% beträgt also das sich die Navigation beim anklicken nicht um die ganze Seite erstreckt sondern 20% weniger. Nun habe ich das Problem das ich Menüpunkte wie den Support habe welches auch Unterpunkte hat. Wenn ich auf diese Punkte mit Unterpunkt klicke ist die Ansicht nicht korrekt. Was kann ich tun? Vielen Dank für die Antworten im Voraus!

Der Code für die Änderungen der Ansicht:

<style>
.js .menu-drawer__menu li {
position: relative;
padding-bottom: 2px; /* Platz für die Linie */
box-sizing: border-box; /* Berücksichtigt padding in der Berechnung */
font-size: 1px !important; /* Kleiner Schriftgröße */
}

.js .menu-drawer__menu li::after {
content: "";
position: absolute;
bottom: 0;
left: 10%; /* Ändern Sie den Prozentsatz nach Bedarf */
width: 80%; /* Ändern Sie den Prozentsatz nach Bedarf */
border-bottom: 0.3px solid #808080; /* Linie */
}
</style>

[Gabe]

Hey @yzarda 

Danke für den Code - hast du diesen von ChatGPT da der Code Kommentare in SIE-Form auf allen Zeilen drin hat? 

An erster Stelle ist wichtig das NICHT im Live Theme zu machen sondern oder in einer Theme Kopie/Testumgebung. Ich habe jetzt auch deinen CSS Code in meiner Dawn Testumgebung getestet und konnte dein gemeldest Problem nicht reproduzieren. Somit sitzt der Wurm irgendwo auf deiner Seite und gerne kann ich einen Experten empfehlen - ich sehe aber du hast deine Frage im Englischen Design Forum auch gestellt. Da werden sich Experten bei dir melden, wie werden aber einen direkten Link zu einem Beispiel brauchen ansonsten werden sich da nicht viele melden.

Ich habe jetzt auch den HTML Code der Untermenüs auf mobile in meinem Dawn Theme aus der Dev Console unten reinkopiert:

<ul class="menu-drawer__menu list-menu" role="list" tabindex="-1"><li>
                                            <a id="HeaderDrawer-home-neuer-retail-kit-dfgdfgdfg" href="/de/products/dallmayr-crema-doro-mild-fine-bundle-pack" class="menu-drawer__menu-item link link--text list-menu__item focus-inset">
                                              dfgdfgdfg
                                            </a>
                                          </li></ul>

Basierend auf deiner Beschreibung, scheint das Problem zu sein, dass die Untermenüs nicht korrekt angezeigt werden, wenn du ihre Breite auf 80% der Gesamtbreite der Navigation einstellst. Eine typische Lösung wäre, den CSS-Code so anzupassen, dass er nicht nur die Hauptmenüpunkte, sondern auch die Untermenüpunkte berücksichtigt:

<style>
.js .menu-drawer__menu li {
position: relative;
padding-bottom: 2px; 
box-sizing: border-box; 
}

.js .menu-drawer__menu li::after {
content: "";
position: absolute;
bottom: 0;
left: 10%; 
width: 80%; 
border-bottom: 0.3px solid #808080; 
}

.js .menu-drawer__menu .submenu {
width: 80%; 
position: absolute; 
left: 10%; 
}


.js .menu-drawer__menu .submenu li {
padding: 10px 0; 
}


.js .menu-drawer__menu li.active::after,
.js .menu-drawer__menu li:focus::after {
border-bottom: 0.5px solid #000; 
}
</style>

Beachte, dass ich die Class .submenu in den CSS-Code eingefügt habe, die als Platzhalter für die Untermenü-Strukturen dient. Einfach die Class entsprechend für Untermenüs im HTML anpassen.

Wenn das nicht klappt musst du es so steuern, dass nur das aktive Untermenü (identifiziert durch eine spezielle Klasse wie .menu-opening) sichtbar ist, während andere Menüpunkte ausgeblendet werden, wenn ein Untermenü geöffnet ist. Dies kann hilfreich sein, um die Navigation auf Mobilgeräten übersichtlicher und benutzerfreundlicher zu gestalten. 

Der erste CSS-Selektor ul.menu-drawer__menu.has-submenu.list-menu.submenu-open > li wählt alle Listenelemente (<li>) innerhalb des übergeordneten <ul>-Elements aus, das die Klassen .menu-drawer__menu, .has-submenu, .list-menu, und .submenu-open enthält. Diese Elemente werden ausgeblendet (display: none;), wenn das Untermenü geöffnet ist.

Der zweite CSS-Selektor ul.menu-drawer__menu.has-submenu.list-menu.submenu-open > li:has(.menu-opening) wählt spezifisch die Listenelemente aus, die ein Kind-Element mit der Klasse .menu-opening enthalten, und stellt sicher, dass diese sichtbar sind (display: block !important;), auch wenn andere Teile des Menüs ausgeblendet sind. Dies ermöglicht es, dass nur das aktive Untermenü angezeigt wird, während andere Menüpunkte verborgen bleiben.

Hoffe das hilft dir weiter - lass wissen falls nicht! 😉

---
Habt ihr auch den Shop auf Ostern eingestellt das jetzt um die Ecke liegt? Warum nicht eine Ostereierjagd 🐣 in das Shop einbauen, um deinen Kunden etwas Gamification und Fun im Shop anzubieten? Gerne kann ich bei Interesse Tipps dazu geben!

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.

[yzarda]

Hey, vielen Dank für deine Antwort. Der Code kommt zwar von mir, jedoch bat ich ChatGBT nach Hilfe und einem ausgebesserten Code. Falls ich diesen Code entfernen würde den ich reingepostet habe wäre die Sache schon erledigt jedoch fehlen mir dann die CSS "Dekos" wie die Linien sowie das Padding. Du kannst gerne auch den Fehler den ich habe, auf dem Handy erkennen auf curclean.com

In der Navigation unter zb. Support oder Länder wirst du sehen was ich meine. Ich werde jedoch mal die Untermenüpunkte berücksichtigen so wie du es gesagt hast. 

[Gabe]

Hey @yzarda 

Ja ich sehe was da passiert. Passiert das auch in einer frischen Kopie des Dawn Themes dass du von Theme Store downloadet? Wenn nicht, dann liegt es an der Codeänderung die ihr ausgeführt habt. 

Es könnte sein, dass bestimmte Skripte oder Stylesheets nur auf Desktop-Ansichten korrekt geladen werden und mobile Ansichten ausschließen, oder dass bestimmte Skripte oder Stylesheets nur auf Desktop-Ansichten korrekt geladen werden und mobile Ansichten ausschließen. Manchmal werden Elemente für mobile Ansichten absichtlich versteckt, um eine bessere Benutzererfahrung zu bieten oder Überfüllung zu vermeiden.

Überprüfe, ob es Klassen wie hidden-mobile oder ähnliche gibt, die die Anzeige auf mobilen Geräten verhindern könnten. Stelle sicher, dass dein HTML-Dokument ein korrekt konfiguriertes Viewport Meta-Tag enthält, welches für die korrekte Skalierung und Anzeige auf mobilen Geräten sorgt. Ein fehlendes oder falsch konfiguriertes Viewport Tag kann zu Anzeigeproblemen führen. 

Überprüfe auch die Media Queries in deinem CSS, um sicherzustellen, dass sie korrekt für die Anzeige auf mobilen Geräten konfiguriert sind. Media Queries ermöglichen es dir, unterschiedliche Styles basierend auf der Bildschirmgröße oder anderen Merkmalen des Anzeigegeräts anzuwenden.

Hoffe das hilft dir weiter - lass wissen falls nicht! 😉

[yzarda]

Hallo, es liegt definitiv am Code. Habe es schon ausprobiert indem ich den Code mal entfernt habe. Nur war unser Ziel auf der Mobile Navigation Linien und ein Padding zu erstellen. Komischerweise wirkte es sich auch auf diese Sache aus. Mit dem Desktop hat das ganze nichts zu tun das hat eine eigene Navigation. 

[Gabe]

@yzarda 

Ja, aufgrund der "Verengung" der Breite werden die <li> child-elements offensichtlich verschoben und daher nicht mehr sichtbar.

VG,

[yzarda]

@Gabe 

Hm… verstehe. Hättest du da eine Lösung? Oder einen verbesserten Code am Besten?

SG

[Gabe]

Hey @yzarda 

Es geht rein von den Platzverhältnissen nicht, egal welchen verbesserten Code man verwendet. Alles wird einen Dominoeffekt auf andere Elemente des Menüs haben die dann auch nicht mehr korrekt funzen werden.

Das sieht man auch mit deiner Unterhaltung mit dem Richard von Pagefly (@PageFly-Richard). Der ist einer unserer Top Experten und ich glaube, wenn du den besten Tipp bekommen möchtest dann wird er dir den geben können. Der weiß wesentlich mehr als ich, wie du das Problem lösen kannst, also empfehle ich dein Gespräch mit ihm fortzusetzen oder ihn anzupingen. Die können einen kleinen Job für dich in deinem Theme durchführen, oder eben dir zeigen, wie das das viel besser mit der Pagefly App erreichen kannst was du erreichen möchtest.

Hoffe das hilft dir weiter - lass wissen falls nicht! 😉