Jump to content

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

Recommended Posts

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?

If my comments are useful, please like and mark my solution as answer. It will encourage me. Thanks

MD Rofik
Website Designer and Digital Marketer

Am I helpful? Want to offer me a coffee?
Send me a message if needed any help. I'll try to reply as soon as possible.


 

Link to comment
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

If my comments are useful, please like and mark my solution as answer. It will encourage me. Thanks

MD Rofik
Website Designer and Digital Marketer

Am I helpful? Want to offer me a coffee?
Send me a message if needed any help. I'll try to reply as soon as possible.


 

Link to comment
1 hour ago, oliviapalacios said:

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;
    }
}

 

Screenshot_461.png

Edited by Web_Solutions

If my comments are useful, please like and mark my solution as answer. It will encourage me. Thanks

MD Rofik
Website Designer and Digital Marketer

Am I helpful? Want to offer me a coffee?
Send me a message if needed any help. I'll try to reply as soon as possible.


 

Link to comment
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;
    }
}

 

Screenshot_463.png

If my comments are useful, please like and mark my solution as answer. It will encourage me. Thanks

MD Rofik
Website Designer and Digital Marketer

Am I helpful? Want to offer me a coffee?
Send me a message if needed any help. I'll try to reply as soon as possible.


 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.