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

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

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

Sorry to have so many questions, but I just noticed that this part is only working on select pages and not on others. Can you help me figure out why and how to fix that?

1 hour ago, Nat-C said:

Sorry to have so many questions, but I just noticed that this part is only working on select pages and not on others. Can you help me figure out why and how to fix that?

Which page has problem? Can you share link..

On 9/2/2020 at 2:12 AM, tuanphan said:

Which page has problem? Can you share link..

Sure thing!

These are the pages that are having issues:

https://grey-cranberry-c4ar.squarespace.com/about-odyssey

https://grey-cranberry-c4ar.squarespace.com/what-is-ss

https://grey-cranberry-c4ar.squarespace.com/how-to-join

These are having the issue too but the header has black text instead of white because they don't have a 'headline' section. So if leaving these as is would be easier, that's totally fine. Because I realize if these pages have the black sticky header like the other pages, the header text color will need to be changed as well.

https://grey-cranberry-c4ar.squarespace.com/odyssey-history/pre-wwii

https://grey-cranberry-c4ar.squarespace.com/odyssey-history/galapagos

https://grey-cranberry-c4ar.squarespace.com/odyssey-history/wwii

https://grey-cranberry-c4ar.squarespace.com/odyssey-history/postwwii-transit

https://grey-cranberry-c4ar.squarespace.com/odyssey-history/postwwii-sandiego

https://grey-cranberry-c4ar.squarespace.com/odyssey-history/1974-present

https://grey-cranberry-c4ar.squarespace.com/odyssey-history/projects

https://grey-cranberry-c4ar.squarespace.com/contact-us

https://grey-cranberry-c4ar.squarespace.com/crew-activity-photos

https://grey-cranberry-c4ar.squarespace.com/bsa-charter-photos

https://grey-cranberry-c4ar.squarespace.com/blog

16 hours ago, Nat-C said:

Sure thing!

These are the pages that are having issues:

https://grey-cranberry-c4ar.squarespace.com/about-odyssey

https://grey-cranberry-c4ar.squarespace.com/what-is-ss

https://grey-cranberry-c4ar.squarespace.com/how-to-join

These are having the issue too but the header has black text instead of white because they don't have a 'headline' section.

https://grey-cranberry-c4ar.squarespace.com/odyssey-history/pre-wwii

https://grey-cranberry-c4ar.squarespace.com/odyssey-history/galapagos

https://grey-cranberry-c4ar.squarespace.com/odyssey-history/wwii

https://grey-cranberry-c4ar.squarespace.com/odyssey-history/postwwii-transit

https://grey-cranberry-c4ar.squarespace.com/odyssey-history/postwwii-sandiego

https://grey-cranberry-c4ar.squarespace.com/odyssey-history/1974-present

https://grey-cranberry-c4ar.squarespace.com/odyssey-history/projects

https://grey-cranberry-c4ar.squarespace.com/contact-us

https://grey-cranberry-c4ar.squarespace.com/crew-activity-photos

https://grey-cranberry-c4ar.squarespace.com/bsa-charter-photos

https://grey-cranberry-c4ar.squarespace.com/blog

What is access password?

6 hours ago, tuanphan said:

What is access password?

Password is: banana22

17 minutes ago, Nat-C said:

Password is: banana22

Try this code

.tweak-fixed-header:not(.sqs-edit-mode-active) .header .header-announcement-bar-wrapper.shrink {
    background: red !important;
}

7 minutes ago, tuanphan said:

Try this code

It says there's a syntax error. 

Where did you get green { and } in Line 1 & Line 4?

3 minutes ago, tuanphan said:

Where did you get green { and } in Line 1 & Line 4?

I have no idea. 😆 I deleted all the code and copied and pasted the code you sent again (to figure out where it came from) and it worked! Thanks again for your help!

-hey! I think I put every code in the CSS box, but I still have black square around drop down. Could you help me what I did wrong?

https://orchid-orca-dzt5.squarespace.com/config/settings/site-visibility

PW: dropdown

11 hours ago, 1982gonzo said:

-hey! I think I put every code in the CSS box, but I still have black square around drop down. Could you help me what I did wrong?

https://orchid-orca-dzt5.squarespace.com/config/settings/site-visibility

PW: dropdown

Add to Home > Design > Custom CSS

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

That did work! Thank you for your help!

Please could someone help me make my fixed menu transparent too please? I tried to add the code myself but it didn’t work.

Thanks so much!

21 hours ago, Soditzy said:

Please could someone help me make my fixed menu transparent too please? I tried to add the code myself but it didn’t work.

Thanks so much!

Can you share site url? We can help easier

@tuanphan I am having a similar issue as discussed above. Have a Fixed Position header set to transparent with header style set to Basic -- however I am still seeing a black header background momentarily after scrolling and as page loads. Mind taking a look?

https://rb4.squarespace.com/ 

Pass: RB4 

On 11/15/2020 at 11:27 PM, joshroos said:

@tuanphan I am having a similar issue as discussed above. Have a Fixed Position header set to transparent with header style set to Basic -- however I am still seeing a black header background momentarily after scrolling and as page loads. Mind taking a look?

 

https://rb4.squarespace.com/ 

Pass: RB4 

Hi. Do you still need help?

Also, I see scroll arrow on mobile is a bit off center. Do you want to fix?

https://rb4.squarespace.com/about

1 hour ago, tuanphan said:

Hi. Do you still need help?

Also, I see scroll arrow on mobile is a bit off center. Do you want to fix?

https://rb4.squarespace.com/about

@tuanphan yes! I figured out the header, can you help center align scroll arrow on mobile?

I am having this issue as well. When first accessing the page the transparency works but when you scroll down, it turns either black or white depending on the page you are on. I have tried all the code in this tread as well as code i have read in other threads with no success.
Any other options?

site: https://www.justinpape.com/

On 11/17/2020 at 9:58 PM, joshroos said:

@tuanphan yes! I figured out the header, can you help center align scroll arrow on mobile?

Hi. Sorry. Missing your notification. IT looks like you solved?

On 11/18/2020 at 12:17 AM, jpjustinpape said:

I am having this issue as well. When first accessing the page the transparency works but when you scroll down, it turns either black or white depending on the page you are on. I have tried all the code in this tread as well as code i have read in other threads with no success.
Any other options?

site: https://www.justinpape.com/

Add to Home > Design > Custom CSS

header#header {
    background: white !important;
}

Hi Tuanphan,

I have tried all the various code mentioned in this thread on a 7.1 site and haven't met with success either. Attaching an image of the sticky menu - currently appearing with grey background. 

I am temporarily going to disable the "fixed" header since it looks bad with the background but the site link is this: https://giraffe-salmon-2jdl.squarespace.com/ pass: FMA

Also, is it possible to have an item (text or image) in the bottom left corner fixed at all times?

Thanks!

-Kerin

On 3/6/2021 at 1:36 AM, kerin said:

Hi Tuanphan,

I have tried all the various code mentioned in this thread on a 7.1 site and haven't met with success either. Attaching an image of the sticky menu - currently appearing with grey background. 

I am temporarily going to disable the "fixed" header since it looks bad with the background but the site link is this: https://giraffe-salmon-2jdl.squarespace.com/ pass: FMA

 

Also, is it possible to have an item (text or image) in the bottom left corner fixed at all times?

Thanks!

-Kerin

Add to Design > Custom CSS

header#header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
}

How do i set header trasparent on 7.0 style sqaurespace website? 

www.huntandgathergrocer.com.au

On 4/18/2021 at 2:10 PM, christina_marie_333 said:

How do i set header trasparent on 7.0 style sqaurespace website? 

www.huntandgathergrocer.com.au

Transparent header on homepage only or entire site?

Hi thank you so much for your question sitewide! however it would be helpful to know both code injections however for this website www.huntandgathergrocer.com.au I need a transparent header site wide. 

For me 7.1 simple 

.header {
  background: transparent!important;
}