Change top bar's font size & colour
![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/b-46_mc70j7.png)
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
![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/b-48_my1v1y.png)
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
![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/b-49_191y71.png)
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
![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/b-50_eg2fzs.png)
Step 3 : Save and done
3. Change top bar's background colour
![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/b-99_pg0omq.png)
💡 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
![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/b-52_cp6o6t.png)
Step 3 : Look for another .site-nav__dropdown { at line 2308 and change the background-colour
![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/b-53_1j7wlv7.png)
Step 4 : Save
Result :
![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/b-54_qgx9u9.png)
Updated on: 17/10/2023
Thank you!