Squarespace 7.1 header opacity

Site URL: https://tarpon-lavender-jbyy.squarespace.com/

Password to the site is: TEMP

I'm having problems making the header opacity appear semi-transparent. The options when editing the header are simply solid colour, or fully transparent. What I'm trying to achieve is a semi-transparent header, that has an opacity of 50%.

The site is on the Eldridge template, so Squarespace 7.1

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

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!

@Ben_Keeley

Yep you can use this code
 

.header-nav-folder-content {
    background: rgba(0,0,0,.5) !important;
}

@RyanDejaegher

You're a star! Worked perfectly 🙂

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.

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.

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?

On 2/24/2021 at 11:07 AM, mathildenicoline said:

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

I figures it out myself - need to replace the 0's with colorvalues 🙂

I've managed to get this working whilst in the css editor, but once i've hit save a navigate away it returns to a solid header again.

Any ideas why?

https://disc-cone-hl9f.squarespace.com/work

pass - kinglear

@kinglear

SS has a setting for transparent headers in the user interface. No need for CSS.

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?

10 hours ago, kinglear said:

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

Ah I see. When I look at your site css I see the following.

The space in your hex code is the issue.

Let us know how it goes.

hmmm.  That's not there in my edit window?

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.

You sir, are a genius.  Changed to rgba and worked a treat. 

Thanks a million!

site url https://plantain-cuboid-ldm6.squarespace.com/config/

i cannot make the header on my frontpage transparent no matter what. any ideas how to make this work anyone? 

@nikkatz

Please set up a site-wide password.

Post the password here.

Adding a site-wide password is not a security breach. Please read the documentation at the link provided to understand how it works.

We can then take a look at your issue.

Hey guys, I have the same issue. I'm trying to make the header at 50% opacity but the code above doesn't seem to work. Any suggestion, please? 

@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.

If you're on 7.1, you don't need to use CSS for this. Just go to Edit Site Header > Click Style > Solid > and adjust Opacity right below it. It took me forever to figure this out hah. Hopefully this helps!