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

Making navigation bar transparent on only one page


Sienawalker

Question

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 post
  • Answers 18
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular 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 wor

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? 

Posted Images

18 answers to this question

Recommended Posts

  • 0

Add to Home Page Settings > Advanced > Header

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

 

Link to post
  • 0
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 post
  • 0
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 post
  • 0
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?

Link to post
  • 0
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;
}

 

Link to post
  • 0

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 post
  • 0
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?

 

Link to post
  • 0
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 post
  • 0
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?

Link to post
  • 0
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 post
  • 0
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>

 

Link to post
  • 0
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 post
  • 0
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>

 

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