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?
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.
@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.
-
Go to Online Store → Theme → Edit code.
-
Open your assets/base.css theme file.
-
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.
I am so glad that suggestion solution can help.
