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

Shopify Discussion

Topic summary

A user seeks to make header navigation text (Home, Shop, FAQs, Contact) bold in the Dawn theme, particularly on mobile devices.

Solutions Provided:
Two contributors suggested similar approaches:

  • Navigate to Online Store → Edit Code → base.css
  • Add CSS code targeting .header__menu-item with font-weight: bold !important
  • Wrap the code in a media query @media (max-width: 767px) for mobile-specific styling

Current Issue:
The original poster reports the code only works on desktop, not mobile. When they remove the media query wrapper, bold styling applies to desktop but still fails on mobile devices.

Status: Unresolved - the mobile implementation remains problematic despite multiple code suggestions.

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

How to make Home, Shop, FAQs, contact header bold and especially for mobile----> dawn theme

main.PNG
main.PNG550×157 7.6 KB

2

Hi, @enovation You can follow these steps to achieve your result
Go to online store → edit code → Go to base.css file and add the bellow code

@media screen and (max-width: 800px) {
  .header__menu-item {
    font-weight: bold !important;
  }
}

Result:

BrainStation23_0-1709296848554.png
BrainStation23_0-1709296848554.png1369×231 11.1 KB

3

Hi @enovation

This is Henry from PageFly - Landing Page Builder App

You can try this code by following these steps:

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

Step 2: Search file base.css

Step 3: Paste the below code at bottom of the file → Save

@media (max-width: 767px){
.header__menu-item {

font-weight: bold !important;

}}

Hope that my solution works for you.

Best regards,

Henry | PageFly

4

Hello,

unfortunately the code does not work unless I enter only this part:
.header__menu-item {

font-weight: bold !important;

}

without this :@media (max-width: 767px){
but it only works on pc and not on mobile

5

Hello, @BrainStation23

unfortunately the code does not work unless I enter only this part:
.header__menu-item {

font-weight: bold !important;

}

without this :@media (max-width: 767px){
but it only works on pc and not on mobile