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

Fixed AND transparent header/menu. How?? (SS 7.1)

Question

Site URL: https://amal-testsite.squarespace.com

Hi all

In Squarespace 7.1, there is already build in options to choice both “fixed position” and “transparent” in EDIT SITE HEADER. 

BUT, it doesn’t work. When header is fixed, then transparency doesn’t work. Instead Is has default or choosen background color. 
 

so how do I set or code to get transparent header/navigation menu when it’s also fixed? 
 

test site:

https://amal-testsite.squarespace.com 

password is: abcabc 

 

Share this post


Link to post

22 answers to this question

Recommended Posts

  • 0

With this transparency turned OFF 😞

.tweak-transparent-header:not(.header--menu-open) .header-announcement-bar-wrapper {
    background: transparent !important;
}

Share this post


Link to post
  • 0

@tuanphan I just tried this solution. It made the menu transparent on scrolling, but the dropdown folders still maintained their opaque background. Any advice?

I want to say this: for you and every other person who shares CSS expertise on these forums, I HUGELY appreciate you. I'm learning, but flail around with that part of design. Thank you, thank you. 

Share this post


Link to post
  • 0

For that matter, do you know if it's possible to make the navigation background a transparent color, including the folder dropdowns? I tried everything that's worked for me in 7.0 and earlier to no avail.

 

Share this post


Link to post
  • 0
12 hours ago, Adam_Davidson said:

For that matter, do you know if it's possible to make the navigation background a transparent color, including the folder dropdowns? I tried everything that's worked for me in 7.0 and earlier to no avail.

 

Can you share link to your site?


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Squarespace Customer Care

Share this post


Link to post
  • 0

Came here as I'm having the same issue. On my home page I have a photo background so would love to make the navigation background and folder dropdowns transparent to be able to see the image. Presently the drop down is a black box. 

@tuanphan this is my first post in these threads which I have just discovered. I have implemented your code a few times already which has saved me big time, thankyou!

Share this post


Link to post
  • 0
8 hours ago, Wisemedia said:

Came here as I'm having the same issue. On my home page I have a photo background so would love to make the navigation background and folder dropdowns transparent to be able to see the image. Presently the drop down is a black box. 

@tuanphan this is my first post in these threads which I have just discovered. I have implemented your code a few times already which has saved me big time, thankyou!

If you can share link, I can take a look


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Squarespace Customer Care

Share this post


Link to post
  • 0
20 hours ago, tuanphan said:

If you can share link, I can take a look

Site:

mattwisemanmedia.com

Password: MWM123

Moreover, if you have a suggestion for how to make the photo category not all turn yellow - only the active page turn yellow - that would be awesome too. Thankyou!

Share this post


Link to post
  • 0
Posted (edited)

@Adam_Davidson@Wisemedia@tuanphanOn 7.1. first code line to fix header position. Second line to make drop down background transparent from folder. Set you header to transparent background in header pencil settings. 

.header#header {position: fixed!important;}

.header-nav-folder-content {
   background: transparent!important;
}
- John 

Edited by JOHNMD

mcgouran.john@gmail.com

Share this post


Link to post
  • 0

Hello,

I am having similar issues with my header, it turned into a black box. I added this code that and it seems to have fixed the transparency issue. But the header does not stay fixed. Anyone have a suggestion? THANK YOU SOOO MUCH.

https://www.thecardinalconcepts.com/

Quote

.header#header {position: fixed!important;}
.tweak-fixed-header .header .header-announcement-bar-wrapper {
    background: transparent !important;
}

 

Share this post


Link to post
  • 0
8 hours ago, muzakcat said:

Hello,

I am having similar issues with my header, it turned into a black box. I added this code that and it seems to have fixed the transparency issue. But the header does not stay fixed. Anyone have a suggestion? THANK YOU SOOO MUCH.

https://www.thecardinalconcepts.com/

 

to enable fixed header, no need to use code. Hover on Header on Edit Mode > Click Edit Site Header > Style > Enable Fixed 


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Squarespace Customer Care

Share this post


Link to post
  • 0

Thanks Tuanpahn,

I checked and "Fixed Position" was selected, but the Fixed Header Style was on Basic. When I changed it to "scroll back" it works now.

Thank you!

Cathy

Share this post


Link to post
  • 0

So I tried this and it worked well, but what I didn't take into account was that my menu text is white and the background color on most of my pages is also white. (Shoulda seen that coming.)  Is there a way to make my header transparent when at the actual top of the page but turn solid white after scrolling past my top image?

I'm pretty new to this so sorry if this is a kinda obvious question, but how are you guys sharing your sites? Are you sharing your actual administrator login and password? (I hope not!) Or is there a way to give someone access to view your site before it's live?

Share this post


Link to post
  • 0
13 hours ago, Nat-C said:

So I tried this and it worked well, but what I didn't take into account was that my menu text is white and the background color on most of my pages is also white. (Shoulda seen that coming.)  Is there a way to make my header transparent when at the actual top of the page but turn solid white after scrolling past my top image?

I'm pretty new to this so sorry if this is a kinda obvious question, but how are you guys sharing your sites? Are you sharing your actual administrator login and password? (I hope not!) Or is there a way to give someone access to view your site before it's live?

Yes. You can. If your site is trial, you can setup password & share url


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Squarespace Customer Care

Share this post


Link to post
  • 0
Posted (edited)
On 6/22/2020 at 4:37 AM, tuanphan said:

Yes. You can. If your site is trial, you can setup password & share url

Thank you! That will make this process so much easier!

Do you know of a way to make my fixed header transparent when at the actual top of the page but turn into non-transparent after scrolling past my top image?

Edited by Nat-C

Share this post


Link to post
  • 0
22 hours ago, Nat-C said:

Thank you! That will make this process so much easier!

Do you know of a way to make my fixed header transparent when at the actual top of the page but turn into non-transparent after scrolling past my top image?

If you share link to your site, I can check easier.


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Squarespace Customer Care

Share this post


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