How can I make header text bold on the Dawn theme?

Store Design

Topic summary

A user seeks to make header navigation links bold in Shopify’s Dawn theme.

Solutions Provided:

Two approaches were offered:

  1. theme.liquid method: Add CSS styling above the </body> tag in layout >> theme.liquid targeting nav.header__inline-menu elements with font-weight: 700 !important

  2. base.css method (recommended):

    • Navigate to Online Store → Themes → Edit Code
    • Open Assets/base.css
    • Add CSS at the bottom: .header__menu-item { font-weight: bold; }
    • For active links only: .header__active-menu-item { font-weight: bold; }

Outcome: The user confirmed one solution worked successfully. Both responses included screenshots showing exact file locations and code placement.

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

Hey, can I make the clickable links on header bold somehow? thanks

https://piirretty.myshopify.com/

2

@Piirretty

Hello

Please add the below code above in theme.liquid

layout >> theme.liquid

nav.header__inline-menu .list-menu li a.header__menu-item span { font-weight: 700!important; }

techlyser_ecom_0-1674919189456.png
techlyser_ecom_0-1674919189456.png1891×572 65.5 KB

3

Hi @Piirretty

May I suggest to update code these steps:

  1. Go to Store Online-> theme → edit code

EBOOST_0-1674802790535.png
EBOOST_0-1674802790535.png1623×433 51.1 KB

  1. Assets/base.css
  2. Add code below to bottom of file

EBOOST_1-1674919154171.png
EBOOST_1-1674919154171.png475×109 935 Bytes

.header__menu-item span,
.header__active-menu-item {
	font-weight: bold;
}

If you only want bold active link you use code below

EBOOST_2-1674919210536.png
EBOOST_2-1674919210536.png483×120 923 Bytes

.header__active-menu-item {
	font-weight: bold;
}
2 Likes
4

Thank you! This one worked.