Make sub-menu in dropdown expand to the right

[Official-Kortez]

Hello everyone,

I would like to make my sub-menu expand to the right instead of downwards, as it does now. I’ve tried some other "solved" solutions, but they didn't work for me. I am kindly asking for assistance on how to achieve this and whether it’s possible to include a script that will add a smooth transition and expansion.

Please note that I want this solution to apply only to laptops and PCs, as the menu I use for phones is a drawer.

Theme in use: DAWN
Website: https://official-kortez.com/

Thank you all in advance!

[CodingFifty]

Hi @Official-Kortez,

Please change the dropdown to mega menu

[Lakshya_design]

Hello @Official-Kortez 

Thanks for the info, try this one.

1. From your Shopify admin dashboard, go to "Online Store" and then "Themes".
2. Find the theme you want to edit and click on "Actions", then select "Edit code".
3. In the "Assets" folder, locate and click on the CSS file (often named something like styles.css or theme.scss.liquid).
4. Add your custom code at the bottom of the file or wherever it’s appropriate based on your needs.

.header-wrapper header.header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding-bottom: 0 !important;
}

.header-wrapper header.header nav.header__inline-menu {
    margin: 0;
}

[Lakshya_design]

Hello @Official-Kortez 

Thanks for the info, try this one.

1. From your Shopify admin dashboard, go to "Online Store" and then "Themes".
2. Find the theme you want to edit and click on "Actions", then select "Edit code".
3. In the "Assets" folder, locate and click on the CSS file (often named something like styles.css or theme.scss.liquid).
4. Add your custom code at the bottom of the file or wherever it’s appropriate based on your needs.

.header-wrapper header.header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding-bottom: 0 !important;
}

.header-wrapper header.header nav.header__inline-menu {
    margin: 0;
}

[Official-Kortez]

I think I might have explained it wrong but what I actually want to do is a menu that expands on the right side (see image below):

[CodingFifty]

@Official-Kortez 
Did you change the dropdown to the mega menu?

[Official-Kortez]

Yes for now since I didnt like the drop-down. Should I set it back for you?