Display dropdown sub menu one below other

Store Design
, ,

Topic summary

A user is attempting to customize their Shopify store’s dropdown menu layout to display the first two submenu items stacked vertically in one column, with remaining items arranged normally.

Current Challenge:

  • The theme doesn’t natively support having two subcategories under each menu item as separate entities
  • Standard menu creation treats each subcategory as an independent item

Progress Made:
The user has developed custom CSS code that partially achieves the desired layout:

  • Uses flexbox (display: flex; flex-direction: column) to control submenu item arrangement
  • Targets specific child elements using :nth-child() selectors
  • Applied background color and width adjustments
  • Screenshot shows the work-in-progress implementation

Current Status:
The solution is incomplete and the user is seeking expert assistance to refine the CSS code. A Shopify preview link has been shared for troubleshooting. The discussion remains open with no final resolution yet.

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

Hello Experts,

I need to display the submenu for the first 2 one below the other.

How can this be done?

mel30_0-1716226676121.png
mel30_0-1716226676121.png1302×412 40.9 KB

Here is the store preview link https://2wv6nqf7ygf9fztz-13017972795.shopifypreview.com

Thank you for your support

2

Hey @Meruem

Here is the link https://2wv6nqf7ygf9fztz-13017972795.shopifypreview.com

Working on a backup code

Thank you :blush:

3

Hey @Meruem

The Menu i created that way by creating subcategories under each main menu.

I want to display the first two subcategories under each other/ first column and rest as it is.

But only for the first main menu.

4

@Meruem

Yes I tried but the theme does not support having two subcategories under each other.

It treats it as a separate item.

Hence was thinking can it be achieved by css/ code

5

@Meruem @PageFly-Victor

I tried to get some info from the internet but was able to achieve something like this

mel30_0-1716271348157.png
mel30_0-1716271348157.png1654×577 59.7 KB

#nav-mm ul.nav-m-ul li.has-dropdown ul.dropdown > li {
    display: flex;
    flex-direction: column;
   width: 100%; 
    background-color: #E0FBE2;
}

#nav-mm ul.nav-m-ul li.has-dropdown ul.dropdown > li:nth-child(1),
#nav-mm ul.nav-m-ul li.has-dropdown ul.dropdown > li:nth-child(2) {
    flex: 0 1 25%;
}

#nav-mm ul.nav-m-ul li.has-dropdown ul.dropdown > li:nth-child(3),
#nav-mm ul.nav-m-ul li.has-dropdown ul.dropdown > li:nth-child(4) {
    flex: 1 1 25%; 
    align-self: flex-start;
}
#nav-mm ul.nav-m-ul li.has-dropdown ul.dropdown > li:last-child {
    flex: 1 1 50%;
}

Maybe you can help with this. Please let me know thank you for your support