Make sub-menu in dropdown expand to the right

Make sub-menu in dropdown expand to the right

Official-Kortez
Tourist
27 0 2

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!

 

 

Replies 6 (6)

CodingFifty
Shopify Partner
616 98 118

Hi @Official-Kortez,

Please change the dropdown to mega menu

CodingFifty_0-1737391647038.png

 

Coding Fifty || Shopify Partner
For any custom section queries, please visit: Fiverr Profile
Found my response useful? Like it and mark as Accepted Solution!
For additional discussions, reach out via: Email ID: codingfifty@gmail.com

Lakshya_design
Shopify Partner
10 2 3

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_0-1737394343629.png

 

Lakshya_design
Shopify Partner
10 2 3

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_0-1737394779812.png

 

Official-Kortez
Tourist
27 0 2

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

OfficialKortez_1-1737396199975.png

 

CodingFifty
Shopify Partner
616 98 118

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

CodingFifty_0-1737403122384.png

 

Coding Fifty || Shopify Partner
For any custom section queries, please visit: Fiverr Profile
Found my response useful? Like it and mark as Accepted Solution!
For additional discussions, reach out via: Email ID: codingfifty@gmail.com
Official-Kortez
Tourist
27 0 2

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