Jump to content

Making navigation bar transparent on only one page

Recommended Posts

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/

Link to comment
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!

Link to comment
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? 

Link to comment
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>

image.thumb.png.5e7119c7cf791e093d253897998125d6.png

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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 months later...

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 🙏

Link to comment
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?

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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. 

Link to comment
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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!

Link to comment
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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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. 

696033815_ScreenShot2021-01-10at8_43_09AM.png.0495cc29ebbc7e50dbc8fa26f2a5aeb6.png

Link to comment
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. 

696033815_ScreenShot2021-01-10at8_43_09AM.png.0495cc29ebbc7e50dbc8fa26f2a5aeb6.png

Try again with

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 year later...
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;
}

image.thumb.png.fcab2ca8778486e8a794c465867f43c5.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

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

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.