Making navigation bar transparent on only one page

Site URL: https://www.sienaleigh.com/

Hello! I have been using the following code to have a transparent header on ONLY my homepage for quite a few sites, and after this last release it no longer works. Is anyone else experiencing anything similar, and do you have ideas for workarounds?

//transparent header on hp//
.homepage .header-announcement-bar-wrapper {
    background: rgba(0,0,0,0) !important;
}

Here is an example of a site using this code that worked prior to the last release https://www.sienaleigh.com/

Add to Home Page Settings > Advanced > Header

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

43 minutes ago, tuanphan said:

Add to Home Page Settings > Advanced > Header

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

 

Hi @tuanphan thanks for posting! I'm having the same issue now as OP, but this header code isn't working. Is there another way around that? Thanks!

My website is: http://situatedmag.com/  if thats helpful

3 hours ago, tuanphan said:

Add to Home Page Settings > Advanced > Header

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

 

I've added this into my homepage code injection and it still isn't working - do you have a site on 7.1 where this is successful? 

On 10/10/2020 at 6:15 PM, CDudley said:

My website is: http://situatedmag.com/  if thats helpful

Add to Page Settings > Advanced > Header

<style>
  header#header {
    position: absolute !important;
    background: transparent;
}
</style>

On 10/10/2020 at 8:58 PM, Sienawalker said:

I've added this into my homepage code injection and it still isn't working - do you have a site on 7.1 where this is successful? 

Can you share your site url?

5 hours ago, tuanphan said:

Add to Page Settings > Advanced > Header

<style>
  header#header {
    position: absolute !important;
    background: transparent;
}
</style>

Can you share your site url?

This is in place on two websites I have running - https://www.sienaleigh.com/ and https://www.notyouraveragemotherrunner.com/

1 minute ago, Sienawalker said:

This is in place on two websites I have running - https://www.sienaleigh.com/ and https://www.notyouraveragemotherrunner.com/

Add to Home > Design > Custom CSS (both sites use same code)

.homepage header#header {
    background: transparent;
}

1 hour ago, tuanphan said:

.homepage header#header { background: transparent; }

Amazing, worked. Thank you!!

thank you so much @tuanphan!! much appreciated

Ahhhh! Yes! I'd previously being using 2019-era code that worked great until it didn't. Came out here looking for the answer and @tuanphan was on the case, making life easy for everyone, as usual. THANK YOU!

Hello, there are a lot of posts about this already so don't want to create a new one, but wondering if something has changed that would affect this code working now? Site is https://bumblebee-chartreuse-kmxn.squarespace.com/ pw rprednep

I'm on 7.1 and have tried both the homepage advanced page setting header code and the custom CSS code. 

The header stays white w/black text; I also tried changing the colour to black w/white text then adding the code but nothing happens - the header does not go transparent. Any help is much appreciated. 

tagging @tuanphan 🙏

8 hours ago, KellenMcG said:

Hello, there are a lot of posts about this already so don't want to create a new one, but wondering if something has changed that would affect this code working now? Site is https://bumblebee-chartreuse-kmxn.squarespace.com/ pw rprednep

I'm on 7.1 and have tried both the homepage advanced page setting header code and the custom CSS code. 

The header stays white w/black text; I also tried changing the colour to black w/white text then adding the code but nothing happens - the header does not go transparent. Any help is much appreciated. 

tagging @tuanphan 🙏

I see homepage fine here. Do you still need help?

Also, I see on tablet, homebanner is a bit narrow. Do you want to increase width?

2 hours ago, tuanphan said:

I see homepage fine here. Do you still need help?

Also, I see on tablet, homebanner is a bit narrow. Do you want to increase width?

 

Hi, sorry, I have just made the header transparent across the whole site for now so I can keep working on it. But I will leave it as black or white if that helps you look into the issue. Thanks. 

On 12/30/2020 at 10:38 PM, KellenMcG said:

Hi, sorry, I have just made the header transparent across the whole site for now so I can keep working on it. But I will leave it as black or white if that helps you look into the issue. Thanks. 

Hi. Sorry for the delay. I was off some days for the new year

Do you still need help on this?

On 1/5/2021 at 2:42 AM, tuanphan said:

Hi. Sorry for the delay. I was off some days for the new year

Do you still need help on this?

Hi @tuanphanhappy New Year to you! I have figured out a workaround of transparent global setting, then CSS for a black header on specific pages (work, about, press). However, could you help me with code to make the header buttons white w/black text on these pages? Or if you have a better suggestion overall, please let me know. Thanks!

On 1/9/2021 at 7:29 AM, KellenMcG said:

Hi @tuanphanhappy New Year to you! I have figured out a workaround of transparent global setting, then CSS for a black header on specific pages (work, about, press). However, could you help me with code to make the header buttons white w/black text on these pages? Or if you have a better suggestion overall, please let me know. Thanks!

Add to Page Header

<style>
  header#header a.btn {
    background: red;
    color: green;
}
</style>

7 hours ago, tuanphan said:

<style> header#header a.btn { background: red; color: green; } </style>

Thanks, @tuanphan but for some reason it's not reflecting the black text. Here's my code: 

<style>
  header#header a.btn {
    background: white;
    color: black;
}
</style>

...but here's the header. I tried with red, green, etc but nothing seems to fix the button text. 

On 1/10/2021 at 11:43 PM, KellenMcG said:

Thanks, @tuanphan but for some reason it's not reflecting the black text. Here's my code: 

 

<style>
  header#header a.btn {
    background: white;
    color: black;
}
</style>

...but here's the header. I tried with red, green, etc but nothing seems to fix the button text. 

Try again with

<style>
  header#header a.btn {
    background: red !important;
    color: green !important;
}
</style>

Hi, I have tried every code but it doesn't work. I want transparent background for my menu only on homepage.

On 12/14/2022 at 7:00 AM, Vevs said:

Hi, I have tried every code but it doesn't work. I want transparent background for my menu only on homepage.

Hi,

What isy our site url?

https://joannelozmanconsulting.com/home

Password Joanne

PS. for the moment my homepage is set to be my Coming Soon Page.

Thanks!

On 12/20/2022 at 8:15 PM, Vevs said:

https://joannelozmanconsulting.com/home

Password Joanne

PS. for the moment my homepage is set to be my Coming Soon Page.

Thanks!

Add to Design > Custom CSS

/* transparent header */
body#collection-639151ab99e9a93746766eef .header-background-solid {
    background-color: transparent !important;
}

Oh thank you so much @tuanphan! It`s working, thank you!

But it doesn't work properly on mobile. Please help.