Transparent Header on Front Page only (7.1)

10 hours ago, tuanphan said:

Add to Home > design > Custom CSS

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

thank you so much! this worked!!

38 minutes ago, marketingm said:

I'm wondering if you can help me as none of the solutions above work for me. I have a white header which I would like to make transparent.

Hi,
Please share your website URL.

Best,
Leopold

1 hour ago, marketingm said:

@IXStudio

https://blenny-impala-ct4t.squarespace.com/

pw - emma 

Add to Home > Design > Custom CSS then save & reload your site.

body.homepage .header-announcement-bar-wrapper {
    background: transparent !important;
    position: absolute !important;
}

Hey  @tuanphan,

I'm trying to make the header transparent on the Homepage but only while staying at the top where the picture is visible. Afterwards it's supposed to take a certain color.
However, on the other pages I want it to take a predefined color.

I'm using the Almar template. 

https://flatworm-bird-bx27.squarespace.com

pw: 1

Hope that makes sense and thanks in advance for your help!!

7 hours ago, MunichMarketers said:

Hey  @tuanphan,

I'm trying to make the header transparent on the Homepage but only while staying at the top where the picture is visible. Afterwards it's supposed to take a certain color.
However, on the other pages I want it to take a predefined color.

I'm using the Almar template. 

https://flatworm-bird-bx27.squarespace.com

pw: 1

Hope that makes sense and thanks in advance for your help!!

Hi

Use this code in Design -> Custom CSS

body[data-menu-overlay-theme-switcher="true"] .header.black:not(.shrink) {
    background: transparent !important;
}

Please use the like button if it helps you!

Best,
Leopold

Thanks for the help @IXStudio, almost perfect!

This code changes it for all pages though. I would love that it only stays see through at the top of the "Home" Page. I tried adding it in the custom CSS section for just this page but that doesn't seem to work.

Is it possible to have the header only on one page see thru and "normal" on all others?

6 hours ago, MunichMarketers said:

Thanks for the help @IXStudio, almost perfect!

This code changes it for all pages though. I would love that it only stays see through at the top of the "Home" Page. I tried adding it in the custom CSS section for just this page but that doesn't seem to work.

Is it possible to have the header only on one page see thru and "normal" on all others?

Hi,
Welcome!
Please share your website URL and details via DM to check it.

Best,
Leopold

@IXStudio, I was following along and got to your solution:

body[data-menu-overlay-theme-switcher="true"] .header.black:not(.shrink) {
    background: transparent !important;
}

(I changed "black" to "dark" as that is what I'm using) And just like MunichMarketers, this does make the header transparent only at the top, but it does it for every page. Is it possible to only apply this to the homepage?

My URL is arcseastudio.com

On 7/2/2021 at 10:03 AM, jgrish14 said:

@IXStudio, I was following along and got to your solution:

body[data-menu-overlay-theme-switcher="true"] .header.black:not(.shrink) {
    background: transparent !important;
}

(I changed "black" to "dark" as that is what I'm using) And just like MunichMarketers, this does make the header transparent only at the top, but it does it for every page. Is it possible to only apply this to the homepage?

 

My URL is arcseastudio.com

try this

body.homepage .header:not(.shrink) {
    background: transparent !important;
}

Hi @tuanphan none of these solutions work for my site. Any ideas?

Website is https://www.newtownardschiropractic.co.uk

Many Thanks.

On 11/3/2021 at 3:17 PM, PhilipW said:

Hi @tuanphan none of these solutions work for my site. Any ideas?

 

Website is https://www.newtownardschiropractic.co.uk

 

Many Thanks.

I see you figured it out?

Sorry didn't see your reply. I haven't worked it out yet. Thought I had. Still have to put a solid colour behind it on Homepage as when it goes transparent you can't see the white logo on a blog page. Any advice would be appreciated.

On 11/23/2021 at 12:58 AM, PhilipW said:

Sorry didn't see your reply. I haven't worked it out yet. Thought I had. Still have to put a solid colour behind it on Homepage as when it goes transparent you can't see the white logo on a blog page. Any advice would be appreciated.

Add to Design > Custom CSS

body.homepage header#header {
    background-color: transparent !important;
}

body.homepage .header-announcement-bar-wrapper {
    background-color: transparent !important;
}

body.homepage article section:first-child {
    padding-top: 0px !important;
}

body.homepage .header-background-solid {
    background-color: transparent !important;
}

Hi all,

I'm also trying to do this, only one one specific page's header. I've used the codes and can't get it right 😞

Any help PLEASE? 

On 11/26/2021 at 5:39 PM, IwanJ said:

Hi all,

I'm also trying to do this, only one one specific page's header. I've used the codes and can't get it right 😞

Any help PLEASE? 

Can you share link to your site? We can check easier

On 11/25/2021 at 10:37 AM, tuanphan said:

Add to Design > Custom CSS

body.homepage header#header {
    background-color: transparent !important;
}

body.homepage .header-announcement-bar-wrapper {
    background-color: transparent !important;
}

body.homepage article section:first-child {
    padding-top: 0px !important;
}

body.homepage .header-background-solid {
    background-color: transparent !important;
}

 

You're a hero. Thank you very much!

Hi There, 

I am trying to do the same but only on my homepage. (If that's possible) 

So ideally the menu will sit over the first banner photo. Alternatively the menu can arrive on a delay when you scroll down the page if that is easier?

www.violetjamesstudio.com

Thank you very much

Charley 

17 hours ago, Charley14 said:

Hi There, 

I am trying to do the same but only on my homepage. (If that's possible) 

So ideally the menu will sit over the first banner photo. Alternatively the menu can arrive on a delay when you scroll down the page if that is easier?

www.violetjamesstudio.com

Thank you very much

Charley 

Do you use Brine Template or which? I remember some template support transparent, without using custom code

Add to Custom CSS then save & reload the site

header.Header.Header--top {
    position: fixed;
    background-color: transparent !important;
}

Thank you. 

That worked, but is there a way to do it so it's only on the homepage and as it was before for the rest of the pages?

Ideally I would like it to stay at the top of the page so it isn't visible as you scroll down the rest of the page? (I've seen on some forums it's possible to do that and then have it pop up when you scroll backwards which would be great, but if that's too complicated don't worry!)

Thank you so much for helping us all on these forums!!

and sorry, I use Brine.

On 1/13/2022 at 4:48 PM, Charley14 said:

Thank you. 

That worked, but is there a way to do it so it's only on the homepage and as it was before for the rest of the pages?

Ideally I would like it to stay at the top of the page so it isn't visible as you scroll down the rest of the page? (I've seen on some forums it's possible to do that and then have it pop up when you scroll backwards which would be great, but if that's too complicated don't worry!)

Thank you so much for helping us all on these forums!!

Use this code for homepage, remove above code

body.homepage header.Header.Header--top {
    position: fixed;
    background-color: transparent !important;
}

Thank you, that works. Is there a way the menu can stay at the top of the page, so it doesn't follow as you scroll down?

thank you

On 1/18/2022 at 12:44 AM, Charley14 said:

Thank you, that works. Is there a way the menu can stay at the top of the page, so it doesn't follow as you scroll down?

thank you

try change position: fixed; to position: absolute;

Hello i want to do this to mine but when i paste the code  my header is transparent on homepage but on others pages too.

https://www.arnaudchabot.com/

I want a white header on all my portfolio's pages. Someone to help ?

On 6/28/2022 at 1:53 AM, arnaudchabot said:

Hello i want to do this to mine but when i paste the code  my header is transparent on homepage but on others pages too.

https://www.arnaudchabot.com/

I want a white header on all my portfolio's pages. Someone to help ?

Hi,

Which code did you try?