How can I make my menu semi bold on the Dawn theme?

dawntheme
Excursionist
17 0 3

Hey!

I am trying to make my menu semi bold without having to change other texts sections in my store. In the customize theme it changes the fonts on other places and not only the menu. So i think i need some coding?

Someonw who can help me out?

Right now it looks like this: 
Skärmavbild 2021-11-29 kl. 14.53.28.png
But i want it to be SEMI BOLD.

Thnaks

Replies 7 (7)

drakedev
Shopify Partner
689 148 231

Hi @dawntheme ,

 

you can try to add the following code at the end of file /assets/component-list-menu.css

/* Make Menu Items Font Bold */
.list-menu__item {
  font-weight: 700;
}

 

If my answer was helpful click Like to say thanks
If the problem is solved remember to click Accept Solution
Shopify/Shopify Plus custom development: You can hire me for simple and/or complex tasks.
dawntheme
Excursionist
17 0 3

Hey! It made the meny bold. But i want it to be "semi-bold". I tried to change the font-weight to less, but it did not make a difference. Suggestions?

dawntheme
Excursionist
17 0 3

Oh.. i just noticed that is changed my footer text to bold also... I just want the meny to change. Suggestion?

drakedev
Shopify Partner
689 148 231

To avoid the problem of font weight change in the footer change the code like this:

.header .list-menu__item {
    font-weight: 700;
}

Semi Bold font-weight value is 600.

But it could be that you will not notice the changes if you set to 600, because the font-family for semi-bold font is not loaded.

If my answer was helpful click Like to say thanks
If the problem is solved remember to click Accept Solution
Shopify/Shopify Plus custom development: You can hire me for simple and/or complex tasks.
dawntheme
Excursionist
17 0 3

This helped to only get the meny bold. Thanks!

How do I "load" the semi-bold? 

CooeeCommerce
Shopify Expert
32 1 7

I was facing the same problem. I ended up finding the solution in the theme.liquid file of the Dawn theme.

The bold font weight was being set in this line of code using the font_modify font filter:

 

assign body_font_bold = settings.type_body_font | font_modify: 'weight', 'bold'

 

I changed this to:

 

assign body_font_bold = settings.type_body_font | font_modify: 'weight', '600'​

 

The Semibold font is now displayed as the bold font or wherever <strong> is used.
dean27
Tourist
7 0 1

you're a good man or lady! 👍 Thank you