Transparent Header on Front Page only (7.1)

Hello I am trying to make Front navigation bar Transparent Front Page only (7.1). But the above code doesn't work for me. Please help.

On 8/30/2023 at 10:44 PM, Meghna said:

Hello I am trying to make Front navigation bar Transparent Front Page only (7.1). But the above code doesn't work for me. Please help.

What is your site url? We can check it easier

Thank you for your response 🙂

https://leopard-tomato-dja8.squarespace.com/

password09

On 9/2/2023 at 7:20 PM, Meghna said:

Thank you for your response 🙂

https://leopard-tomato-dja8.squarespace.com/

 

password09

I see you figured it out?

hello @tuanphan , I did manage to make the navigation transparent.  I kept the font black (navigation and brand logo) for the whole website, then i decreased the opacity of navigation bar background to 0. 

to make the font visible on the front page, I changed it to white with the following code. But the cart icon is still black so its not visible. 

and this is on the phone 

I would like to make them white please both on the phone and desktop only front/home page. 

and the overlay navigation on the phone has white font for the brand logo, cart icon, burger icon and social links- i would like them to be in black please so they are visible.  Please help. 

On 9/11/2023 at 7:14 PM, Meghna said:

hello @tuanphan , I did manage to make the navigation transparent.  I kept the font black (navigation and brand logo) for the whole website, then i decreased the opacity of navigation bar background to 0. 

to make the font visible on the front page, I changed it to white with the following code. But the cart icon is still black so its not visible. 

 

 

and this is on the phone 

 

I would like to make them white please both on the phone and desktop only front/home page. 

 

and the overlay navigation on the phone has white font for the brand logo, cart icon, burger icon and social links- i would like them to be in black please so they are visible.  Please help. 

The site is expired. You can access this link to extend it for free

@tuanphan thank you the website is working now could you please help me out with the above query. 

On 9/14/2023 at 3:32 PM, Meghna said:

@tuanphan thank you the website is working now could you please help me out with the above query. 

Use this CSS code

body.homepage:not(.header--menu-open) svg.icon.icon--cart {
    stroke: white !important;
}
body.homepage:not(.header--menu-open) .burger-inner>div {
    background-color: white !important;
}

Hi @tuanphan, I have tried a few different versions of your code, but can't get the homepage to have the transparent header background. Could you take a look? Thank you!

https://www.jominceramic.com/

Edit: Managed to find another of your code snippets and work out a solution, thank you!

Hi @tuanphan, 

I currently have a transparent header. But as soon as I scroll, this header remains transparent so the text is not always clear. I want the header to have its own background as soon as I scroll.  So basically the only time that it’s transparent, is at the top of my homepage.

Example of how I want: https://www.bespokestylings.com/

My URL: https://trend-za.nl

Would you look at my page?
Thanks in advance!

On 10/8/2023 at 7:29 AM, Abbas40 said:

Hi @tuanphan, 

I currently have a transparent header. But as soon as I scroll, this header remains transparent so the text is not always clear. I want the header to have its own background as soon as I scroll.  So basically the only time that it’s transparent, is at the top of my homepage.

Example of how I want: https://www.bespokestylings.com/

My URL: https://trend-za.nl

Would you look at my page?
Thanks in advance!

Can you check your site url again?

Is it not working? Seem to work fine with me.. @tuanphan

On 10/7/2023 at 5:29 PM, Abbas40 said:

My URL: https://trend-za.nl

This is where I ended up after redirecting through several sites.

Can u try again now please? @creedon

Any recommendation pls? @tuanphan

On 10/9/2023 at 7:54 PM, Abbas40 said:

Is it not working? Seem to work fine with me.. @tuanphan

I meant your site is Shopify, not Squarespace and currently header is not sticky on scroll. 

Hi, @tuanphan

I too am trying to get only my homepage header to be transparent. Unfortunately, no code I've found has worked for me. Could you please take a look?

The template family is Brine and the version is 7.0

https://www.preventionofviolence.com/

Thanks in advance!

On 10/25/2023 at 3:33 PM, FPV said:

Hi, @tuanphan

I too am trying to get only my homepage header to be transparent. Unfortunately, no code I've found has worked for me. Could you please take a look?

The template family is Brine and the version is 7.0

https://www.preventionofviolence.com/

Thanks in advance!

 

Add to Website Tools (under Not Linked) > Custom CSS > Then save & reload the site

body.homepage header.Header.Header--top {
    position: absolute;
    left: 0;
    width: 100%;
    z-index: 9999;
    background-color: transparent !important;
}

It worked. Thank you so much!

I've input all of the code given to make my header transparent on the home page, but I haven't been able to get it to work. 

Thanks for your help

https://lpctxk.com/

On 4/24/2024 at 1:28 AM, lpctxk said:

I've input all of the code given to make my header transparent on the home page, but I haven't been able to get it to work. 

Thanks for your help

https://lpctxk.com/

I see your homepage header already transparent, you try checking it again.

I'm quite struggling with this. I've tried everything and can't get it to work. Would love transparent header only on this page : www.echowines.com/home (it's not currently set as the home page while under construction but will be eventually!)

I've tried basically all the custom css provided and nothing works. Please help!

On 11/25/2024 at 4:27 AM, EchoWines said:

I'm quite struggling with this. I've tried everything and can't get it to work. Would love transparent header only on this page : www.echowines.com/home (it's not currently set as the home page while under construction but will be eventually!)

I've tried basically all the custom css provided and nothing works. Please help!

You can use this to Website Tools > Custom CSS

#collection-65f1fbe7d6ee51239547d90e {
    article>section:first-child {
        padding-top: 0px !important;
    }
    .header-background-solid, header#header {
        background-color: transparent !important;
    }
}