Jump to content

Squarespace 7.1 header opacity

Recommended Posts

@Ben_Keeley 

You can use this code. You can change the last value (0.5) between 0 - 1, to adjust how transparent the color is. BTW is this your company? If so super cool 🙂

/* Add this code to Design -> Custom CSS */

#header {
background: rgba(0,0,0,0.5);
}

 

Philadelphia, PA

👉 Squarespace Tutorials 

Chat/Message on FB Messenger for quickest responsehttps://m.me/dejaegherryan

 

Link to comment

Thanks @RyanDejaegher

That CSS update has worked perfectly, the only issue is the Folder dropdowns are still solid black, is there a way I can make these display in the same way as the header i.e. semi-transparent with 50% opacity?

The company is a friend of mines, but one I'm really fond of - they're definitely super cool in my opinion too.

Really appreciate you taking the time to help!

Link to comment
  • 3 months later...

I too have tried the opacity CSS code but once I put it in, the header bar doesn't go away when scrolling down the page.

I have the settings turned on that is supposed to hide it upon scrolling down but the custom CSS seems to make it a static semi-transparent block of black instead.

Link to comment
14 hours ago, roxner said:

I too have tried the opacity CSS code but once I put it in, the header bar doesn't go away when scrolling down the page.

I have the settings turned on that is supposed to hide it upon scrolling down but the custom CSS seems to make it a static semi-transparent block of black instead.

Can you share site url? We can check easier.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 4 months later...
On 6/17/2020 at 7:38 PM, RyanDejaegher said:

@Ben_Keeley 

You can use this code. You can change the last value (0.5) between 0 - 1, to adjust how transparent the color is. BTW is this your company? If so super cool 🙂


/* Add this code to Design -> Custom CSS */

#header {
background: rgba(0,0,0,0.5);
}

 

Is there any solution for making this a custom color, and not black?

Link to comment
  • 7 months later...

Thanks but I was trying to achieve like a 70% opacity and not fully transparent.

 

I have this code in the CSS with the last 2 digits denoting opacity - 

.header {
background: #373C3CB5 !important;
}

 

Like I said it works with the CSS editor open but once I hit save it doesn't seem to work anymore?

Link to comment
7 hours ago, kinglear said:

That's not there in my edit window?

Hmm... indeed! Two suggestions. Retype the whole hex code over again. There might be a non-printable character in there. If that doesn't do the trick. Use rgba instead of hex. It could be the LESS preprocessor is choking on the hex code with alpha info.

Ah ha! I just tested my last hypothesis. It does appear to be a problem with the LESS preprocessor.

For those that don't know. CSS entered into Design > Custom CSS is processed by an ancient version (1.3.3) of the LESS preprocessor. My guess is there is a bug or it doesn't support hex code with alpha.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 6 months later...

@EllaILP

Please post the URL for a page on your site where we can see your issue.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site. Please read the documentation at the link provided to understand how it works.

Please read the documentation at the link provided on how to share a link to your site to understand how it works. A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

We can then take a look at your issue.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 3 weeks later...

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.