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

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 

Thank YOU.. You ARE THE BEST!!

@tuanphan

Hmm... Transparency only works on some of the pages. 

For example, on this page: https://amal-testsite.squarespace.com/services2  The header background turns solid black??? 

Add !important to after

background: transparent !important;

With this transparency turned OFF 😞

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

try

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

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

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.

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?

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!

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

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!

@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 

Perfect @JOHNMD that appears to have done it!

Thankyou.

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

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 

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

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?

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

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?

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.

On 7/11/2020 at 3:44 PM, tuanphan said:

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

The link is: https://grey-cranberry-c4ar.squarespace.com/

And temporary password is: banana22

On 7/21/2020 at 10:15 AM, Nat-C said:

The link is: https://grey-cranberry-c4ar.squarespace.com/

And temporary password is: banana22

Add to Home > Design > Custom CSS

.header-announcement-bar-wrapper.black.shrink {
    background: red !important;
}

On 8/25/2020 at 12:39 AM, tuanphan said:

Add to Home > Design > Custom CSS

.header-announcement-bar-wrapper.black.shrink {
    background: red !important;
}

OMG thank you! Do you happen to know what the color options are for the header? I changed it to black, which looks okay, but I was wondering if there might be another color option that would look better with my color scheme.