Dawn theme menu bar drop down height

Store Design
,

Topic summary

A user sought to reduce the excessive height of dropdown menus in Shopify’s Dawn theme.

A solution was provided involving custom CSS code:

  • Navigate to Online Store → Theme → Edit code
  • Open theme.liquid file
  • Insert CSS styling before the closing tag

The CSS targets:

  • .mega-nav elements with reduced row-gap (set to 0)
  • .main-nav__child padding adjustments
  • Media query for screens 769px and wider

The solution was confirmed successful by the original poster, effectively resolving the dropdown menu height issue.

Summarized with AI on November 5. AI used: claude-sonnet-4-5-20250929.
2

Hello @rvdwcmarketing

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

@media (min-width: 769px) { .mega-nav .md\:nav-gap-y-4 { row-gap: 0 !important; } .main-nav__child.mega-nav { padding: 0 !important; } }

Tech_Coding_0-1727863263918.png
Tech_Coding_0-1727863263918.png1320×375 94.3 KB

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.

1 Like