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
4. Sub-navigation under the same row

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 :

4. Sub-navigation under the same row

Step 1 : Click on Channels > Online Store > Edit Source and select timber.scss file

Step 2 : Look for .site-nav__dropdown { around line 2300 and find

Step 3 : Change the flex-wrap: wrap; to flex-wrap: nowrap;

Step 4 : Save and here's the result

Before:

After:

Updated on: 29/07/2025