How to change the submenu font type dawn 2.0

Technical Q&A

Topic summary

Changing the Shopify Dawn 2.0 header submenu font independently from the main navigation font. The issue: submenu and main menu share styles in base.css, causing both to use the same font.

Early reply suggested adding a font via the theme editor (video link), but the requester clarified they only want to change the submenu font style, not install custom fonts.

Resolution provided by the original poster: edit Online Store → Theme → Edit code → Assets → base.css. Find the rule targeting “.header__submenu .header__menu-item { font-size: 15px; }” and replace it with a more specific anchor selector that sets a different font-family and keeps font-size 15px. The example uses a long selector for submenu items and applies font-family: “YOURFONTHERE” with !important to override defaults.

Technical notes: CSS (Cascading Style Sheets) controls visual styles; selector specificity targets submenu items; !important forces the rule to take precedence.

Outcome: Resolved with clear steps; no remaining open questions.

Summarized with AI on February 9. AI used: gpt-5.
1

Hello,

im wondering how to change the header sub menu font family while leaving the regular header menu font type the same. It seems like they’re both linked to the same style in the base.css.

site: dankmeme.com

1 Like
2

Hi @on-targit

To add a font family, you need to add the code in your theme editor and assign this to the text you want to change

1 Like
3

I appreciate your reply, but I’m not looking to install custom fonts into the theme. I’m specifically asking how to change the submenu font style in the header menu to be different than the font used in the navigation (Home, Contact). Here’s a picture with a red box around the sections I would like to change.

menushop.jpg
menushop.jpg812×373 43.7 KB

(https://dankmeme.com)

4

Nevermind, I figured it out.

For anyone who might want to do this:

  1. Go to Online Store->Theme->Edit code

2. Asset->/base.css

Find the line of code that says this:

.header__submenu .header__menu-item {
  font-size: 15px;
}

Replace it with this:

a.header__menu-item.header__menu-item.list-menu__item.link.link--text.focus-inset.caption-large {
  font-family: "YOURFONTHERE" !important;
  font-size: 15px;
}