Change header font on phone

Shopify Discussion
,

Topic summary

A Shopify store owner noticed their header menu font appears different on mobile versus desktop and wants to make them consistent.

Two CSS Solutions Provided:

  1. Bundler-Manuel’s approach: Target the .site-nav .site-nav__label class and add font-size: 15px !important; to the theme.css file at the bottom.

  2. rajweb’s approach: Use .menu-drawer__menu-item with media queries to control both desktop and mobile font styling separately, allowing customization of font-family and font-size for each viewport.

Implementation Steps:

  • Navigate to Online Store > Themes > Edit Code in Shopify admin
  • Locate the main CSS file (theme.css or theme.scss.liquid)
  • Paste the chosen CSS code at the bottom of the file

Both solutions involve adding custom CSS to override the default mobile header menu styling. The second solution offers more granular control with responsive breakpoints.

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

Hello, my header menu on phone looks different than my header menu on desktop. How can I change the font of the header menu on phone? URL: TrendBlend.
Phone:

TrendBlend_0-1731249694644.jpeg
TrendBlend_0-1731249694644.jpeg185×400 8.32 KB

Desktop:

TrendBlend_1-1731249695521.png
TrendBlend_1-1731249695521.png399×215 86.4 KB

2

Hey there @TrendBlend follow the steps below and you should be able to have it set to the font size you’ll like

  1. From admin go to “Online stores” → “Themes”.
  2. Click action button from the current theme and select “Edit code”.
  3. Search for “theme.css” file and paste the below code at the bottom of the file.
.site-nav .site-nav__label {
    font-size: 15px !important;
}
3

Hey @TrendBlend ,

To change the font of this menu on mobile, you can use the following CSS:

/* General font styling for header menu */
.menu-drawer__menu-item {
    font-family: 'Your Desired Font', sans-serif;
    font-size: 18px; /* Adjust for desktop */
}

/* Specific font styling for mobile */
@media (max-width: 768px) {
    .menu-drawer__menu-item {
        font-family: 'Your Desired Font', sans-serif;
        font-size: 16px; /* Adjust for mobile */
    }
}

Replace “Your Desired Font” with the font you want to apply, such as ‘Arial’, 'Roboto, etc. Adjust the font-size values as needed.

Follow these steps:

  1. Online Store > Theme > Edit Code

  2. Open your main CSS file (e.g., theme.css or theme.scss.liquid )and paste this code at the bottom.

3.This will apply your font preferences to the menu items in both views, with specific adjustments for mobile. Let me know if you need further help!

If I was able to help you, please don’t forget to Like and mark it as the Solution!
If you’re looking for expert help with customization or coding, I’d be delighted to support you. Please don’t hesitate to reach out via the email in my signature below—I’m here to help bring your vision to life!

Best Regard,
Rajat Sharma

1 Like