How do I get a site header with different colors behind the navigation titles?

Can anyone help me find a way to get a header that looks like this: https://www.cameraclub.com/ ? I want to add different colors behind the navigation titles in blocks just like this.

6 hours ago, oliviapalacios said:

Can anyone help me find a way to get a header that looks like this: https://www.cameraclub.com/ ? I want to add different colors behind the navigation titles in blocks just like this.

Can you share your website URL?

The website is not live yet, still under a free trial. Are you able to try and help without a URL?

2 minutes ago, oliviapalacios said:

The website is not live yet, still under a free trial. Are you able to try and help without a URL?

You share the URL by following this 

https://support.squarespace.com/hc/en-us/articles/205815528-Site-wide-passwords#toc-set-a-site-wide-password

https://jellyfish-gold-ysc4.squarespace.com/ 

PW: booch

1 hour ago, oliviapalacios said:

https://jellyfish-gold-ysc4.squarespace.com/ 

PW: booch

Add these code on Custom CSS panel in Website > Utilities > Website Tools > Custom CSS.

@media only screen and (min-width: 800px) {
    .header-announcement-bar-wrapper {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        padding-right: 0 !important;
    }
}

.header-display-desktop {
    .header-nav-list{
        width: 100% !important;
        flex-wrap: nowrap;
    }
    .header-nav-list .header-nav-item{
        width: 100% !important;
        margin: 0 !important;
        text-align: left !important;
    }
    .header-nav-list a {
        padding: 15px 10px!important;
    }
    .header-nav-item:nth-child(3n+1) {
        background: #4c99d4;
    }
    .header-nav-item:nth-child(3n+2) {
        background: #e43d2f;
    }
    .header-nav-item:nth-child(3n+3) {
        background: #dfe100;
    }
    .header-actions--right {
        display: none !important;
    }
}

@Web_Solutions THANKS SO MUCH!!! A few things I'm wondering if are possible as well:

- While I have this design, can I keep the social icons in the header?

- Is it possible to create more space between the logo and start of the navigation?

3 minutes ago, oliviapalacios said:

@Web_Solutions THANKS SO MUCH!!! A few things I'm wondering if are possible as well:

- While I have this design, can I keep the social icons in the header?

- Is it possible to create more space between the logo and start of the navigation?

Replace the previous code with the code below.

@media only screen and (min-width: 800px) {
    .header-announcement-bar-wrapper {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
}

.header-display-desktop {
    .header-nav-list{
        width: 90% !important;
        flex-wrap: nowrap;
    }
    .header-nav-list .header-nav-item{
        width: 100% !important;
        margin: 0 !important;
        text-align: left !important;
    }
    .header-nav-list a {
        padding: 15px 10px!important;
    }
    .header-nav-item:nth-child(3n+1) {
        background: #4c99d4;
    }
    .header-nav-item:nth-child(3n+2) {
        background: #e43d2f;
    }
    .header-nav-item:nth-child(3n+3) {
        background: #dfe100;
    }
}