How do I make the header transparent on one page and not on all the others?

I would like to have only the homepage with a transparant header.

Can anyone help me out?

Website: grit.thehoneymoonplanner.be
Password: heyholetsgo

Thanks in advance.

Ruan

@GRIT_Digital You can try adding this code snippet under Website > Utilities > Website Tools > Custom CSS

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

After adding the code, you can change the design of the header to non-transparent or solid-colored under Edit > Edit Site Header. Thanks! 

1 hour ago, Lesum said:

@GRIT_Digital You can try adding this code snippet under Website > Utilities > Website Tools > Custom CSS

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

After adding the code, you can change the design of the header to non-transparent or solid-colored under Edit > Edit Site Header. Thanks! 

Unfortunately, this doesn't work.

I've added the code and made some changes in the site header but changes are implemented on all pages. 😞

13 minutes ago, GRIT_Digital said:

Unfortunately, this doesn't work.

I've added the code and made some changes in the site header but changes are implemented on all pages. 😞

Hi @GRIT_Digital

Although I'm not an expert, I have a suggestion that may help you achieve a transparent header on your homepage.

Squarespace allows you to target specific elements on single pages using their collection IDs. There's a helpful browser extension available that shows you these IDs without requiring you to inspect each element manually. Once you have that information, you can use the following CSS snippet to apply a transparent background only to the header on your homepage:

Please copy and paste the code provided below:

#collection-64eda136502a4e33f2a18efa .header {
  background-color: transparent !important;
}
 

You can inject this CSS through Squarespace's custom CSS panel or by going to Website > Website Tools > Page Header Code Injection and adding it there, wrapped in `<style>` tags.

Hope this helps! Feel free to reach out if you have any more questions.

Best,
Alexander

5 minutes ago, mindofalexander said:

 

Hi @GRIT_Digital

Although I'm not an expert, I have a suggestion that may help you achieve a transparent header on your homepage.

Squarespace allows you to target specific elements on single pages using their collection IDs. There's a helpful browser extension available that shows you these IDs without requiring you to inspect each element manually. Once you have that information, you can use the following CSS snippet to apply a transparent background only to the header on your homepage:

Please copy and paste the code provided below:

#collection-64eda136502a4e33f2a18efa .header {
  background-color: transparent !important;
}
 

You can inject this CSS through Squarespace's custom CSS panel or by going to Page Settings > Advanced > Page Header Code Injection and adding it there, wrapped in `<style>` tags.

Hope this helps! Feel free to reach out if you have any more questions.

Best,
Alexander

Hi Alexander,

Thank you very much for your effort. Unfortunately, this doesn't work either. 😞

Am I the one doing something wrong?

Best regards,
Ruan

4 minutes ago, GRIT_Digital said:

Hi Alexander,

Thank you very much for your effort. Unfortunately, this doesn't work either. 😞

Am I the one doing something wrong?

Best regards,
Ruan

@GRIT_Digital I'm really new to this as well, so I'm learning right alongside you. I noticed that the initial CSS code didn't work as you expected, so here's a revised version that you might try:

#collection-64eda136502a4e33f2a18efa .header#header {
  background-color: transparent !important;
}

3 minutes ago, mindofalexander said:

 

@GRIT_Digital I'm really new to this as well, so I'm learning right alongside you. I noticed that the initial CSS code didn't work as you expected, so here's a revised version that you might try:

#collection-64eda136502a4e33f2a18efa .header#header {
  background-color: transparent !important;
}
 

In this version, I added the `!important` flag to make sure that this styling overrides any existing styles for the header. I also noticed that you hashtagged the initial code, so I'm including that approach here too.

No luck once again.

If it's easier, I can give you access to the website so you can try some things for yourself.

Best regards,
Ruan

Just now, GRIT_Digital said:

No luck once again.

If it's easier, I can give you access to the website so you can try some things for yourself.

Best regards,
Ruan

Sure, let's give it a try. Could you send me some screenshots of where the header's showing up and you don't want it to? It'll help me get a better idea of what's going on. 

You can send the access request to my email: emailme@mindofalexander.com. No promises, but I'll do my best to figure it out!

2 minutes ago, mindofalexander said:

Sure, let's give it a try. Could you send me some screenshots of where the header's showing up and you don't want it to? It'll help me get a better idea of what's going on. 

You can send the access request to my email: emailme@mindofalexander.com. No promises, but I'll do my best to figure it out!

An invite has been sent. 

Only the homepage needs a transparent header.

Best regards,
Ruan

1 minute ago, GRIT_Digital said:

An invite has been sent. 

Only the homepage needs a transparent header.

Best regards,
Ruan

@GRIT_Digital

I'm in, thanks for the access! However, it looks like I'll need a bit more permission to see the CSS tab and try to fix the issue.

3 minutes ago, mindofalexander said:

@GRIT_Digital

I'm in, thanks for the access! However, it looks like I'll need a bit more permission to see the CSS tab and try to fix the issue.

And now?

1 minute ago, GRIT_Digital said:

And now?

@GRIT_Digital

Nope, still can't get in, unfortunately.

I wonder if @tuanphan could weigh in on this. Tuanphan, have you got any suggestions on how to make the header transparent but only for the homepage?

4 minutes ago, mindofalexander said:

@GRIT_Digital

Nope, still can't get in, unfortunately.

I selected all options on "Website" level.

Admin it is. 

Good luck,
Ruan

Just now, GRIT_Digital said:

I selected all options on "Website" level.

Admin it is. 

Good luck,
Ruan

@GRIT_Digital

I'm in! I'll give this a go while I've got some time. 🙂

use this code to disable transparent on other pages

body:not(.homepage) .header-background-solid {
    background-color: white !important;
}

2 minutes ago, tuanphan said:

use this code to disable transparent on other pages

body:not(.homepage) .header-background-solid {
    background-color: white !important;
}

 

@tuanphan Thank you so much for your help! After reading your question and looking into it a bit more, I realized it was a bit confusing—turns out the homepage header was already transparent. 😄

Appreciate your patience and assistance!