Menu in menu shows the words vertically instead of normal horizontally

Topic summary

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.

Summarized with AI on November 10. AI used: claude-sonnet-4-5-20250929.

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,

1 Like

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…

1 Like

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!

1 Like

You are welcome @1234Joep43 :blush:

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)?

1 Like

You can try replace this code:

ul.mega-menu__list.page-width { display: flex !important; }

hmm that did not work, i mean like this: