How can I create a permanent nested menu in the Dawn theme?

[GenericStoreAdm]

Hey there! I'm new to Shopify and already met my first hurdle; maybe someone could help me out.

I was planning on using the Dawn theme and creating a menu similarly structured to "zalando", a clothing store:

As you can see, they got 3 main menu items (Women, Men, Children) and each of those got a dozen other menu items nested below them.

I already figured out how do do nested menus in Shopify, but they all result in dropdowns, which isn't exactly what I'm aiming for.

Is there a way to show the nested menu permantently below the main menu?

[webwondersco]

@GenericStoreAdm Hope, you are doing well.

Could you please share your Store URL? so can check and guide.

[GenericStoreAdm]

Hi @webwondersco and thanks for your reply!

My store's URL is https://pm-service.at/password 

I keep it password protected in case someone already opens it while it's unfinished (I barely started).

You can enter with the password test123?!

Everything is just for showcase, so I got names like Menu 1, Menu 2 and Menu 3. Don't be surprised! 

Each menu got a sub menu in a drop down (like Sub 1.1, Sub 1.2).

What I'm trying to achieve is to not have a drop down, and instead show a bar below the Header with each sub menu relating to the chosen menu in the header.

Like, if I press (not hover) Menu 1 for example, it should look like this:

[Menu 1]  |  [Menu 2]  |  [Menu 3]
Sub 1.1  |  Sub 1.2

Thanks again for your help!

[webwondersco · Accepted solution]

@GenericStoreAdm Please add the below line of CSS at the end of your base.css file.

body .header__submenu.list-menu{
    display: flex;
    flex-wrap: wrap;
    width: 60rem;
}

[GenericStoreAdm]

@webwondersco That definitely did the trick, thank you!

[PageFly-Richard]

Hi @GenericStoreAdm 

This is Richard from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the </head> to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the </head>

<style>
.header__submenu.list-menu{
    display: flex !important;
    flex-wrap: wrap !important;
    width: 60rem !important;
}
</style>

Hope this can help you solve the issue

Best regards,

Richard | PageFly