When I try to make a menu within a menu, it shows like this. How can i make the menu normal? And just include drop down menu’s below the “adidas” for example?
Yours,
A user encountered a display issue where menu items within a dropdown menu appeared vertically instead of horizontally.
PageFly support (Henry) provided a CSS solution that required adding code to the theme files. The initial fix involved adding display: block !important to ul.mega-menu__list.page-width in the base.css file, but this didn’t resolve the issue.
A second approach was successful: inserting the same CSS code within <style> tags before the closing </body> tag in theme.liquid. This corrected the vertical text alignment.
The user then requested help creating nested dropdown menus (a dropdown within a dropdown). Henry suggested replacing the CSS with display: flex !important for ul.mega-menu__list.page-width, but this solution did not work. The nested dropdown issue remains unresolved, with the user providing a screenshot to clarify their requirement.
When I try to make a menu within a menu, it shows like this. How can i make the menu normal? And just include drop down menu’s below the “adidas” for example?
Yours,
Hi @1234Joep43
This is Henry from PageFly - Landing Page Builder App
You can try this code by following these steps:
Step 1: Go to Online Store->Theme->Edit code.
Step 2: Search file base.css
Step 3: Paste the below code at bottom of the file → Save
ul.mega-menu__list.page-width {
display: block !important;
}
Hope that my solution works for you.
Best regards,
Henry | PageFly
It did not work unfortunately…
You can try again with this code:
Step 1: Go to Online Store->Theme->Edit code.
Step 2: Search file theme.liquid
Step 3: paste bellow code in tag → save.
ul.mega-menu__list.page-width { display: block !important; }It worked! Amazing, thanks!
You are welcome @1234Joep43 ![]()
Do you perhaps also know how i could make the “sub” things into a dropdown menu (so basically a drop down menu in a drop down menu)?
You can try replace this code:
ul.mega-menu__list.page-width { display: flex !important; }