Jump to content

Background Gradient over Multiple Sections and Navigations

Recommended Posts

Site URL: https://kumquat-kale-39as.squarespace.com/

Password: 1234

I have been using this code to add Gradients to the background of each section:

section[data-section-id="61d3c6b8d84036572456d8e4"] .section-background {
background: rgb(25,15,32);
background: linear-gradient(35deg, rgba(25,15,32,1) 0%, rgba(0,0,0,1) 49%, rgba(0,0,0,1) 55%, rgba(9,26,51,1) 100%);
}

But how do I add a gradient to multiple sections, including the navigation, so it all flows as one gradient?

Matt

Link to comment
57 minutes ago, mattjenkins said:

Site URL: https://kumquat-kale-39as.squarespace.com/

Password: 1234

I have been using this code to add Gradients to the background of each section:

section[data-section-id="61d3c6b8d84036572456d8e4"] .section-background {
background: rgb(25,15,32);
background: linear-gradient(35deg, rgba(25,15,32,1) 0%, rgba(0,0,0,1) 49%, rgba(0,0,0,1) 55%, rgba(9,26,51,1) 100%);
}

But how do I add a gradient to multiple sections, including the navigation, so it all flows as one gradient?

Matt

Try the following in Home > Design > Custom Css

body  {
  background: linear-gradient(35deg, rgba(25,15,32,1) 0%, rgba(0,0,0,1) 49%, rgba(0,0,0,1) 55%, rgba(9,26,51,1) 100%) !important;
}

section, section .section-background, #header {
  background-color: unset !important; 
}
.bright-inverse:not(.has-background) .section-background {
  background: unset;
}

Let me know how it works on your site

Support me by pressing 👍 if this useful for you

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

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.