Change top bar's font size & colour

In this article :

1. Change top bar's font colour
2. Change top bar's font size
3. Change top bar's background colour

⚠️ Kindly take note :

• Above all code editing, you will need to re-edit the code again if you switch to a new theme template
• We do not allow to change or edit the code for the checkout page (which include shipping & payment method) due to security reasons
• Only applicable for Candy, WAVE and Lucky theme templates only

1. Change top bar's font colour

Step 1: From EasyStore Admin > Channels > Online Store > Edit source > assets > timber.scss

Step 2 : Look for .site-nav__link around line 2350 - 2400 and change the font colour based on the colour that you prefer

Step 3 ：Save and you're done

💡 Tips : You can change the

• font-weight - normal, bold, bolder, lighter
• colour - you may get the color code of your preferred color **here**
• padding size

2. Change top bar's font size

Step 1: From EasyStore Admin > Channels > Online Store > Edit source > assets > timber.scss

Step 2 : Look for >li > .site-nav__link around line 2350 - 2400 and change the font size based on the size that you prefer

Step 3 : Save and done

3. Change top bar's background colour

Step 1: From EasyStore Admin > Channels > Online Store > Edit source > assets > timber.scss

Step 2 : Look for .site-nav__dropdown{ around line 2290+ and change the colour code for background-colour

Step 3 : Look for another .site-nav__dropdown { at line 2308 and change the background-colour

Step 4 : Save

Result :

Updated on: 17/10/2023