Make sub-menu in dropdown expand to the right

Store Design
, , , ,

Topic summary

A Shopify store owner using the Dawn theme wants to modify their navigation menu so sub-menus expand horizontally to the right instead of vertically downward. They specifically need this behavior only on desktop devices (laptops/PCs), not mobile where they use a drawer menu.

Proposed Solutions:

  • One responder suggested switching from dropdown to mega menu format, which may provide the desired horizontal layout
  • Another provided CSS code to adjust header alignment and spacing, though this appears to address general header layout rather than the specific horizontal expansion request

Current Status:

  • The original poster clarified their request with a visual example showing the desired right-side expansion
  • They’ve temporarily switched to mega menu but asked if they should revert to dropdown for troubleshooting
  • The discussion remains ongoing with no confirmed working solution yet for the specific horizontal sub-menu expansion with smooth transitions
Summarized with AI on November 2. AI used: claude-sonnet-4-5-20250929.
1

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!

2

Hi @Official-Kortez ,

Please change the dropdown to mega menu

CodingFifty_0-1737391647038.png
CodingFifty_0-1737391647038.png629×441 138 KB

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_0-1737394343629.png1920×953 304 KB

4

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
Lakshya_design_0-1737394779812.png1900×952 328 KB

5

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
OfficialKortez_1-1737396199975.png650×287 11.4 KB

6

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

CodingFifty_0-1737403122384.png
CodingFifty_0-1737403122384.png997×505 85.6 KB

7

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