Jump to content

Two Color Header Background

Recommended Posts

Is there a way to make the background of the navigation two different colors in 7.1? I want a 50/50 split between a white background on the left and a black background on the right. I've searched the forums and can't seem to find anything related thus far. Thanks in advance for the assistance.

Link to comment
  • Replies 3
  • Views 441
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

You should be able to use a linear gradient as a background colour for the header in CSS, like this should give a 50% white 50% black:

background: linear-gradient(180deg, #ffffff 0%, #ffffff 50%, #000000 50%, #000000 100%);

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

Unfortunately, that didn't work. Neither did the following:

background: rgb(255,255,255);
background: linear-gradient(90deg, rgba(255,255,255,1) 45%, rgba(0,0,0,1) 75%);

The background of the navigations stays white. Can't figure out what I'm doing wrong.

Link to comment

What code did you use? Can you share your website URL?

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

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.