Dawn - decrease padding around navigation menu titles

Topic summary

Goal: Reduce excessive padding around navigation menu titles in the Dawn Shopify theme.

Key update: A support team provided a CSS-based fix, added to assets/base.css, which adjusts padding for the header’s inline menu.

Implementation:

  • Navigate to Online Store → Theme → Edit code → assets/base.css.
  • Add CSS for:
    • Submenu items: padding-top/bottom set to 0.4rem (selector: nav.header__inline-menu .header__submenu .header__menu-item).
    • Menu items: padding-left/right set to 0.6rem (selector: nav.header__inline-menu .header__menu-item).
    • Summary items: padding-right set to 2rem (selector: nav.header__inline-menu summary.list-menu__item).

Context: An image illustrated the spacing issue; a store URL and password were shared to review.

Outcome: The user confirmed the CSS changes worked as needed.

Status: Resolved; no further issues or disagreements reported.

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

Good morning - I’ve been searching a while and haven’t found this solution yet. How can I tighten up the spacing around navigation menu titles?

@mmstudio
Can you share your store url?

https://michelle-masters-topiary-art.myshopify.com/

password auggul

Hello @mmstudio

It’s GemPages support team and glad to support you today.

I would like to give you a solution to support you.

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

  2. Open your assets/base.css theme file.

  3. Add the code at the end of the file:

nav.header__inline-menu .header__submenu .header__menu-item{
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
}
nav.header__inline-menu  .header__menu-item{
    padding-left: 0.6rem;
    padding-right: 0.6rem;
}
nav.header__inline-menu  summary.list-menu__item{
    padding-right: 2rem;
}

Hope my solution can work and support you!

Kind & Best regards!

GemPages Support Team.

Thank you! Just what I was looking for.

1 Like

@mmstudio

I am so glad that suggestion solution can help.