Change top bar's font size & colour

In this article :

Change top bar's font colour
Change top bar's font size
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](https://www.rapidtables.com/web/color/html-color-codes.html)
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

💡 Tips : You may get the color code of your preferred color [here](https://www.rapidtables.com/web/color/html-color-codes.html)

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