> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.unicornplatform.com/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).

# How to change the color of the navigation bar

This simple guide will show you how to change the color of the navigation bar to whatever you want.

![](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/monosnap-write-notes-more-wax-_etkrl9.png)

# Step 1

Copy this code:

```html
<style>
  .nav-02,
  .nav-02 .nav-02__list_wrapper {
    background-color: #000;
  }  
</style>
```

# Step 2

Paste it into your **Settings > General > Global </body> HTML code:**

![](https://storage.crisp.chat/users/helpdesk/website/-/7/e/7/8/7e782a40c0560c00/chromem8bpvdq58r_h9b4f8.png)

# Step 3

Replace the color code with your own one:

![](https://storage.crisp.chat/users/helpdesk/website/-/7/e/7/8/7e782a40c0560c00/chromenq0a1ftcx6_vx241d.png)### Done!

Now your navigation bar has the color you specified.

### Make buttons white

In addition, you can make all links and buttons on the navigation bar white . To do this kindly copy this code:

```javascript
<script>
document.querySelectorAll(".nav-02 .nav-02__item > .button--black-outline, .nav-02 .buttons-set .button--black-outline, .nav-02__logo_text").forEach(item=>{
  item.classList.remove("button--black-outline");
    item.classList.add("button--white-outline");
}) 
</script>
```

And paste it nto your **Settings > General > Global </body> HTML code:**
![](https://storage.crisp.chat/users/helpdesk/website/-/7/e/7/8/7e782a40c0560c00/screenshot9_1okqmc5.png)