How to shorten the gap between menu and submenu and remove the underline in the submenu? Dawn theme

Store Design
, , ,

Topic summary

Main issue: Reduce the vertical gap between the main navigation and its dropdown submenu in Shopify’s Dawn theme, and remove the hover underline on submenu items. A screenshot of the spacing was provided.

Proposed solutions (CSS):

  • Option 1 (theme.liquid, before ):
    • .header__submenu.list-menu { padding: 0 !important; }
    • .header__submenu .header__menu-item:hover { text-decoration-line: unset !important; }
  • Option 2 (base.css, at bottom):
    • .header__submenu { padding-top: 0 !important; }
    • .header__menu-item { padding-top: 10px !important; padding-bottom: 0 !important; }
    • .header__menu-item:hover { text-decoration-line: unset !important; }

Notes:

  • Both approaches aim to tighten submenu spacing and remove the hover underline; they differ in where the CSS is placed (theme.liquid vs base.css) and which paddings are adjusted.
  • “Submenu” refers to the dropdown under a main menu item; underline is controlled via text-decoration on :hover.

Side thread: A separate user asked how to add space between two Custom Liquid sections, shared a screenshot; clarification was requested, but no solution provided.

Status: No confirmation from the original poster; outcome unresolved. Images are central to understanding spacing.

Summarized with AI on January 4. AI used: gpt-5.
4

Hey how do I add space in between two custom liquids?