Make Menu Font Larger & Bolded on Desktop

Store Design

Topic summary

A user working with the Spotlight theme needed to increase menu font size without affecting body text. The Typography settings were too broad, changing fonts globally rather than targeting just the menu.

Attempted Solutions:

  • Searched forum and tried CSS snippets in base.css file (unsuccessful)
  • Considered making menu text bold in addition to larger

Working Solution:
A community member provided custom CSS code to be added via:

  • Online Store > Themes > Customize > Theme settings > Custom CSS

The CSS targets .list-menu__item with media query for screens 900px+ wide, setting font-size to 1.8rem and font-weight to 700.

Outcome: The provided CSS solution successfully resolved the issue.

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

I am using the Spotlight theme, and the words in my menu are too small. If I go Typography to try to enlarge it, it also enlarges the font size in the body of pages, which I don’t want. I only want to increase my menu font size and possibly bold it.

I looked on this forum and tried copying two snippets of code at the bottom of the base.css file, but neither worked.

Thanks in advance for any advice.

2

@Dalma3

Can you leave the url store here to help check for you, if your store still protecting by password you can leave it here too ?

3

Hi @Dalma3

You can try to add this code to Online Store > Themes > Customize > Theme settings > Custom CSS and check

@media (min-width: 990px) {
.list-menu__item {
    font-size: 1.8rem !important;
    font-weight: 700;
}
}
1 Like
4

This worked - thank you!