Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Squarespace 7.1 header opacity


Ben_Keeley

Question

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

Link to post
  • Answers 6
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular 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

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

@Ben_Keeley Yep you can use this code   .header-nav-folder-content { background: rgba(0,0,0,.5) !important; }  

6 answers to this question

Recommended Posts

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

 

Philadelphia, PA

👉 Squarespace Tutorials 

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

 

Link to post
  • 0

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 post
  • 0

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 post
  • 0
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.

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post

Create an account or sign in to comment

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


×
×
  • Create New...