Transparent Header on Front Page only (7.1)

I'm trying to get a transparent header on Almar (V. 7.1). I only need this on one page so that I can have a black header on all of the other pages and have my logo show through on a banner image on the main page. Any help would be appreciated. 

@CaptainMaze some custom code can solve. Can you share Almar demo Url or your site url?

Sure - I know that you can do this using the unique ID, but I haven't been able to get it to work 

@CaptainMaze Add to Home > Design > Custom CSS

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

You are a godsend. Thank you so much!

I am also wanting to achieve this, and the code that tuanphan posted works, however it displays the actual code itself at the top of the page. I am in Squarespace 7.1 as well. Does anyone know how to hide the code from displaying?

2 minutes ago, alexjschauer said:

I am also wanting to achieve this, and the code that tuanphan posted works, however it displays the actual code itself at the top of the page. I am in Squarespace 7.1 as well. Does anyone know how to hide the code from displaying?

WHERE did you add?

1 minute ago, tuanphan said:

WHERE did you add?

Realized that it was an issue on my end. I was having troubles shortly after with my browser as a whole, and cleared the cookies and everything is back to normal and works again. Thank you for your reply!

This code works well thanks Tuanphan! : ) But does anybody know how to make the navigation links white for transparent header in homepage only in 7.1 ? 

4 minutes ago, elizabethgaffney said:

This code works well thanks Tuanphan! : ) But does anybody know how to make the navigation links white for transparent header in homepage only in 7.1 ? 

Header Nav item use first section text color

I see... Thank you Tuanphan! Still on a 7.1 learning curve but now I get it!  🙏

So, I'm the opposite! I have transparent everywhere but would like a solid navigation bar on the homepage. I tried to play with the code but didn't manage myself.. any ideas? 🙂

Hi, @naeviklund

Please share your website URL.

Best,
Leopold

10 hours ago, IXStudio said:

Hi, @naeviklund

Please share your website URL.

 

Best,
Leopold

www.annsim.de/home (It's still very much WIP!)

24 minutes ago, naeviklund said:

www.annsim.de/home (It's still very much WIP!)

Add to Home > design > Custom CSS

body#collection-5ef1d384a1668a76c2629b73 header#header {
    background: green;
}

Works perfectly. Thank you @tuanphan! 

On 5/3/2020 at 9:45 PM, tuanphan said:

Header Nav item use first section text color

Hi tuanphan, i've managed to make the header transparent for the homepage only, however I cannot seem to find how to make the text white just on the homepage.

Thanks!

7 minutes ago, masongray said:

Hi tuanphan, i've managed to make the header transparent for the homepage only, however I cannot seem to find how to make the text white just on the homepage.

Thanks!

Hi,
Please share your website URL.

Best,
Leopold

2 minutes ago, IXStudio said:

Hi,
Please share your website URL.

Best,
Leopold

Hi Leopold,

The url is masongraymenswear.com.au

Thanks!

21 minutes ago, masongray said:

Hi Leopold,

The url is masongraymenswear.com.au

Thanks!

Use this code in Design -> Custom CSS

#collection-5f1d1f8d0e1af3503caff550.homepage .header-announcement-bar-wrapper {
    filter: invert(1) !important;
}

Please use the like button if it helps you!

Best,
Leopold

33 minutes ago, IXStudio said:

Use this code in Design -> Custom CSS

#collection-5f1d1f8d0e1af3503caff550.homepage .header-announcement-bar-wrapper {
    filter: invert(1) !important;
}

Please use the like button if it helps you!

Best,
Leopold

Thank you so much this worked!

hi @tuanphan

I tried your code to make my cover page header transparent but it did not work. 

My URL is sirinalaw.com

6 hours ago, sirinalaw said:

hi @tuanphan

I tried your code to make my cover page header transparent but it did not work. 

My URL is sirinalaw.com

I see fine here. Do you still need help on this?

On 10/7/2020 at 4:01 PM, tuanphan said:

I see fine here. Do you still need help on this?

@tuanphan yes I still need help, the cover page header is still not transparent

On 10/11/2020 at 2:08 AM, sirinalaw said:

@tuanphan yes I still need help, the cover page header is still not transparent

Add to Home > design > Custom CSS

/* homepage header transparent */
.homepage header#header {
    background: transparent;
}