Transparent Headers on Main Nav Pages

Site URL: https://tuna-raccoon-f8cp.squarespace.com

I am looking to make several pages in the main nav with transparent headers. I located the code to make the home page transparent, but how can you code other pages? Specifically I want "solutions," "resources," "partners," "about" to have the transparent headers (and potentially other pages) all so that I can keep the solid blue header on product pages, blog pages and staff/team pages (which is many pages so makes more sense to custom code the transparent headers since there are only 4-5 of them). Thanks for any help!

Which code did you use to create transparent header?

Edit your code to this and add to Page Settings > Advanced > Header

<style>
.header-announcement-bar-wrapper {
    background: rgba(0,0,0,0) !important
}
</style>

If you use Personal Plan, use this code, replace .homepage with Page ID

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

How to find Page ID.

16 hours ago, tuanphan said:

Which code did you use to create transparent header?

Edit your code to this and add to Page Settings > Advanced > Header

<style>
.header-announcement-bar-wrapper {
    background: rgba(0,0,0,0) !important
}
</style>

If you use Personal Plan, use this code, replace .homepage with Page ID

How to find Page ID.

Thank you for your response. This worked on every page but the blog page. It also made all of the blog posts have a transparent header. Any way around that?

13 hours ago, deziner2010 said:

Thank you for your response. This worked on every page but the blog page. It also made all of the blog posts have a transparent header. Any way around that?

Can you share link to blog page & a blog post?

14 hours ago, tuanphan said:

Can you share link to blog page & a blog post?

Blog: https://tuna-raccoon-f8cp.squarespace.com/blog

Post: https://tuna-raccoon-f8cp.squarespace.com/blog/covid-19-resources

Also, how can I remove the "blog" slug from the Url?

On 4/15/2020 at 7:46 PM, deziner2010 said:

Blog: https://tuna-raccoon-f8cp.squarespace.com/blog

Post: https://tuna-raccoon-f8cp.squarespace.com/blog/covid-19-resources

Also, how can I remove the "blog" slug from the Url?

.collection-type-blog-basic-grid.view-list .header-announcement-bar-wrapper {
    background: rgba(0,0,0,0) !important
}

On 5/13/2020 at 8:51 AM, tuanphan said:

.collection-type-blog-basic-grid.view-list .header-announcement-bar-wrapper {
    background: rgba(0,0,0,0) !important
}

 

Thanks - that did not provide a solution. I still have the transparent blog posts, and now I have a banner on the blog page.

On 5/22/2020 at 7:35 AM, deziner2010 said:

Thanks - that did not provide a solution. I still have the transparent blog posts, and now I have a banner on the blog page.

It seems you solved? ✌️

Hi, I'm trying to do something similar and I've tried a few different codes for making my homepage header transparent, but it's just not working. It seems it must be conflicting with one of my other choices.  My nav items are white, as desired, but the homepage header is still not fully transparent.

( Site: otwo.squarespace.com Pw: Help)

Here is the code I borrowed: 

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

/*Change homepage nav-item color*/
.homepage {
.header-nav-item a, .header-nav-folder-item:hover a {
    color: white !important;
}
}

10 hours ago, oekwo said:

Hi, I'm trying to do something similar and I've tried a few different codes for making my homepage header transparent, but it's just not working. It seems it must be conflicting with one of my other choices.  My nav items are white, as desired, but the homepage header is still not fully transparent.

( Site: otwo.squarespace.com Pw: Help)

Here is the code I borrowed: 

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

/*Change homepage nav-item color*/
.homepage {
.header-nav-item a, .header-nav-folder-item:hover a {
    color: white !important;
}
}

Add to Design > Custom CSS

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

20 hours ago, tuanphan said:

Add to Design > Custom CSS

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

 

Thank you! It worked 🙃