Increase the font size of navigation bar

Store Design
,

Topic summary

A user seeks to increase the navigation bar font size, which appears smaller than dropdown menus, and prefers adding custom CSS to the theme section rather than modifying the liquid theme file.

Solution Provided:

  • Add CSS code to the theme’s stylesheet (base.css, style.css, or theme.css) in the Assets folder
  • Desktop navigation: .header__primary-nav-item.li h6 { font-size: 1.2rem; }
  • Mobile navigation: .header-sidebar__linklist-button.h6 { font-size: 1.5rem; }

Key Points:

  • The desktop solution was confirmed working by the original poster
  • Mobile code was provided as a follow-up
  • A helper asked about adding a section ID template for the font, noting it’s unnecessary when targeting common store elements like headers and footers
  • The original poster confirmed they did not add the section ID template
Summarized with AI on November 5. AI used: claude-sonnet-4-5-20250929.
1

Hello,

I 'd like to increase the font size of the navigation bar, which has smaller font than the dropdown menus.

Screenshot 2024-10-10 113824.png
Screenshot 2024-10-10 113824.png1699Ă—336 121 KB

I prefer to add custom css code to the section instead of liquid.theme

www.embroidtale.com

Thanks.

1 Like
2

Hi @liu_x_trujillo1

Try this one.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
li.header__primary-nav-item .h6 {
    font-size: 1.2rem;
}

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!

1 Like
3

It works on the desktop version thank you! Yes, can you send me some code for mobile?

4

Yes sure, same instruction add this code.

.header-sidebar__linklist-button.h6 {
    font-size: 1.5rem;
}

And Save.

Can I ask, did you add the section id template for the font?

Made4uoRibe_0-1728586265331.png

That’s not necessary when you’re calling common parts of the store, like the footer and header.

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!

5

Nope I didn’t!