> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://support.easystore.co/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Change top bar's font size & colour


|| 📌 Reminder: This guide is suitable for Candy, WAVE, LUCKY and X-Force themes only.

![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/b-46_mc70j7.png)

###### In this article :

1.  [Change top bar's font colour](#2-1-change-top-bars-font-colour)
2.  [Change top bar's font size](#2-2-change-top-bars-font-size)
3.  [Change top bar's background colour](#2-3-change-top-bars-background-colour)
4.  [Sub-navigation under the same row](#2-4-sub-navigation-under-the-same-row)

---
## 1. Change top bar's font colour

**Step 1:** From [EasyStore Admin](https://admin.easystore.co/) > 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](https://admin.easystore.co/) > 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](https://admin.easystore.co/) > 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)

## 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;**

![](https://storage.crisp.chat/users/helpdesk/website/3cab43f1bf79da00/cc94bd48-4938-4acf-a455-bf616c_e9lfzn.png)

**Step 4 :** Save and here's the result

### Before:

![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/b-4_5p6c08.gif)

### After:

![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/b-28_2wpot1.png)