How to enlarge main and drop-down menu font in Colorblock 10.0 theme?

Store Design
, , ,

Topic summary

Goal: Enlarge the main and drop-down menu font in the Shopify Colorblock 10.0 theme.

What was tried:

  • Helper requested the store URL; the OP shared https://openstudioshop.ca/.
  • Proposed fix: add CSS (Cascading Style Sheets) to the theme’s base.css via Online Store > Themes > Actions > Edit code.
    • Drop-down items: div#MegaMenu-Content-2 li a { font-size: 2rem; white-space: nowrap; }
    • Main menu: nav.header__inline-menu a { font-size: 2rem; } and summary#HeaderMenu-artwork span { font-size: 2rem; }
  • OP confirmed where to place code; instructed to paste at the bottom of base.css, save, and preview. Screenshots were included to show the expected result.

Latest update / status:

  • Another user reports partial success: the “Shop” top-level link (which opens a drop-down) did not enlarge, likely due to different selector behavior. They requested further help to adjust the CSS.

Outcome: No final resolution yet; the thread remains open with an outstanding issue on enlarging the drop-down trigger (“Shop”) link.

Summarized with AI on January 4. AI used: gpt-5.
1

I am using the 10.0 Colorblock Theme and the main menu/drop-down menu at the top of our store is a really small font. How do I increase the font?

1 Like
2

Hi @BydlowskaL ,

Would you mind to share your URL website? with password if its protected. Thanks!

3

Hi there! It’s: https://openstudioshop.ca/

1 Like
4

Thannk you for the info. Try this.

  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” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
  4. And Save.
div#MegaMenu-Content-2 li a {
    font-size: 2rem;
    white-space: nowrap;
}

Result:

Ribe_Dagandara_0-1687545787702.png
Ribe_Dagandara_0-1687545787702.png808Ă—376 14.1 KB

Note; you can adjust the sizes.

I hope it help.

5

for the main menu.

nav.header__inline-menu a {
    font-size: 2rem;
}
summary#HeaderMenu-artwork span {
    font-size: 2rem;
}

Result:

Ribe_Dagandara_1-1687546001701.png
Ribe_Dagandara_1-1687546001701.png649Ă—337 11.2 KB

6

Hi there! Do you mean I should paste it at the bottom of the base.css file?

7

Can you confirm where these edits should be made?

8

You can copy and paste in the base.css file. click save then preview.

9

hello, I tried your code in my base.css file and it’s not working completely because the Shop link in my main menu is not enlarging, probably because it opens a drop down menu with different links. can you help me solve it? thanks!