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.
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