A user modified their mobile navigation drawer to display at 80% width instead of full screen. This customization caused display issues with menu items containing sub-items—specifically, the view becomes incorrect when these expandable items are clicked.
Initial Solution Attempted:
A PageFly support representative provided CSS code to add to theme.liquid above the tag
Instructions included navigating to: Online Stores > Themes > More Actions > Edit code
Remaining Issue:
The proposed code partially resolved the height problem but introduced a new issue. Under menu items like “Länder” (Countries), navigation dots/buttons are not all visible in one line—they require horizontal scrolling to view completely. The user referenced their site (curclean.com) as an example where this problem can be observed on mobile devices.
Status: The discussion remains open with an unresolved display issue affecting sub-menu navigation elements.
Summarized with AI on November 11.
AI used: claude-sonnet-4-5-20250929.
Hey, I have a problem with the mobile navigation. I have changed the navigation view so that the width is 80% so that the navigation does not extend around the whole page but 20% less when clicking. Now I have the problem that I have menu items like the support which also has sub-items. When I click on these items with sub-items, the view is not correct. What can I do? Many thanks for the answers in advance!
Thats the code for the changes:
.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 */
}
Hello Richard, thanks for your reply. Your code fulfills the height but we have the following problem. For example, under "Länder"where you were there are buttons under the dots. Please go to curclean.com on your cell phone, in the navigation under countries and try scrolling down in the country line. The dots are not visible but all in one line. Thanks.
Hello Richard, thanks for your reply. Your code fulfills the height but we have the following problem. For example, under "Länder"where you were there are buttons under the dots. Please go to curclean.com on your cell phone, in the navigation under countries and try scrolling down in the Länder line. The dots are not visible but all in one line. Thanks.
