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

BydlowskaL
Tourist
12 0 2

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?

Replies 8 (8)

Made4uo-Ribe
Shopify Partner
6373 1530 1900

Hi @BydlowskaL ,

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

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
BydlowskaL
Tourist
12 0 2

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

Made4uo-Ribe
Shopify Partner
6373 1530 1900

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

Note; you can adjust the sizes. 

I hope it help. 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
BydlowskaL
Tourist
12 0 2

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

Made4uo-Ribe
Shopify Partner
6373 1530 1900

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

 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
BydlowskaL
Tourist
12 0 2

Can you confirm where these edits should be made?

Made4uo-Ribe
Shopify Partner
6373 1530 1900

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

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Danir84
New Member
9 0 0

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!