Change the header style for ONE PAGE ONLY!

Hello Everyone, 

I am new to using css with SquareSpace and honestly a noob when it comes to website creation. However, I am eager to learn and I've loved the journey this far! 

My Question: Can I change the header for just one page and not the entire website? For example, I want my "Contact" page to have a solid header background and everything else to stay gradient. 

Why?: I have a picture in the "Contact" page that stretches into the header and it makes me wanna throw up. 

Have a great day everyone! 

Sincerely, 

Noob BK 

Yes, you can change the header for just one page on your Squarespace website by using custom CSS. Here's how you can do it:

Go to the page where you want to change the header.
Click on the gear icon in the top-left corner to open the Page Settings.
Click on the Advanced tab.
Scroll down to the "Page Header Code Injection" section and click on "Header" to expand it.
Add the following CSS code:
css
Copy code
body#collection-xxxxxx header.Header {
    background-color: #ffffff; /* Change this to the desired background color */
}
Replace "xxxxxx" with the ID of the page. You can find the page ID by looking at the URL when you're on the page. For example, if the URL is https://www.yourdomain.com/contact, then the page ID is "contact".
Change the background color value to the desired color for the header on this page. You can use a color name, HEX code, or RGB value.
Note: The above code targets the page header specifically for the page with the ID you specified. If you have multiple pages that you want to change the header for, you can add more code blocks with different page IDs and background colors.

Also, keep in mind that this method only changes the background color of the header. If you need to make other changes to the header, such as adding a logo or changing the height, you can use CSS to target specific elements within the header.

Hi Mitchy, 

I just wanna say thank you so much for the reply! It is greatly appreciated 🙂 

I will let you know how this goes! 

Brayden

Here is a picture of what is happening. I definitely put the code in wrong (I think I just need to find the page ID). Basically, I just want to have the header background solid and not gradient (on this page only). 

Let me know if you know where I went wrong / if I need a different code for the header style. 

Thanks again for all the help!

Brayden 

Sorry, I should've explained a bit better. I am hoping to not have the background picture in the header. 

Sorry for the spam, I am assuming this is the correct collection ID?

On 3/21/2023 at 11:10 PM, BK97 said:

Sorry for the spam, I am assuming this is the correct collection ID?

Yes. That is collection ID

Greetings, 

That code did not work for me, Can you provide the correct code to change the header for one page to my theme colors? 

Thank you

On 9/12/2023 at 2:33 AM, RMiller said:

Greetings, 

That code did not work for me, Can you provide the correct code to change the header for one page to my theme colors? 

Thank you

Can you share link to a page? We can check & adjust code easier

Hi, I am working on building my portfolio and I am trying to change the color of the header on my home page only. I tried using the code mentioned at the start of this chain but its not working? I'm not sure if Im just not doing it right or what but I would appreciate some help:)

My site is still on a trial period and I don't know how to share it with a password. But I can add someone as a contributor with viewer permissions.

On 11/7/2023 at 2:55 AM, nikkiledee said:

Hi, I am working on building my portfolio and I am trying to change the color of the header on my home page only. I tried using the code mentioned at the start of this chain but its not working? I'm not sure if Im just not doing it right or what but I would appreciate some help:)

My site is still on a trial period and I don't know how to share it with a password. But I can add someone as a contributor with viewer permissions.

You can follow this guide to share url. https://forum.squarespace.com/topic/216243-how-to-setup-password-share-site-url/

I hope this can help those who are still wondering how to change the background color to the header on one page and not across the entire site. I found that reading this link carefully lead me to the right solution, and i hope it can help you too: https://support.squarespace.com/hc/en-us/articles/360000667707-Building-a-site-header?platform=v6&websiteId=64f9d86abfada26aa3ad9316

I wanted my header background color to match the page color. In this case, changing the background style option of my header to "Dynamic" worked like a charm: 

Choose from these background style options:

• Solid - Choose a solid color background. Choose background and navigation colors from your site's palette, or choose custom colors.
• Gradient - Choose a gradient color that fades from dark to light from the top of the header. Choose background and navigation colors from your site's palette, or choose custom colors.
• Theme - Match the background color to one of your site's color themes.
• Dynamic - Make the background transparent. The header overlays the first section on the page and displays the first section's background color or image. This may change from page to page depending if the first section uses section-specific styles or has a background image.

Keep in mind:

• When the background is set to Solid or Theme, the header overlays the first section on the page. If the first section has a background image, the header covers some of the image.
• The header will be solid if the first section is a blog, gallery, store, or events section.
• When the background is set to Dynamic and the first section on the page is a gallery section, the header won't be transparent over the gallery images. Instead, the header displays the gallery section's background color.

I've been trying to use this code on my website pages but it doesn't seem to make a difference,

Fahlundphotography.com

I want to leave my homepage header black but make all other pages have white headers

On 3/4/2024 at 9:01 AM, FahlundPhotography said:

I've been trying to use this code on my website pages but it doesn't seem to make a difference,

Fahlundphotography.com

I want to leave my homepage header black but make all other pages have white headers

Use this CSS code

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

On 3/5/2024 at 12:53 PM, thabomashaba said:

This code isn't working for me. 😞

What is site url?

Thank you in advance!! We would like to delete the header for one page only.

Here is the page: https://www.sfinternationallitfest.org/itinerary-template

If we cannot delete the whole header, can we at least delete the navigation and buttons? We would like to be able to print this page cleanly. Right now the following text in the header runs into the navigation menu when we print. 

The Santa Fe International Literary Festival
will take place May 17–19, 2024,
bringing together world-renowned
authors, thinkers, and passionate readers.

12 hours ago, sfinternationallitfest said:

We would like to delete the header for one page only.

Here is the page: https://www.sfinternationallitfest.org/itinerary-template

Please check the URL. That page doesn't exist.

apologies! It is 

https://www.sfinternationallitfest.org/itinerary-template-2

thank you! 

Hi there,

came across this thread but I couldn't find the answers I'm looking.. Hoping it's still active! 

I'd like to change the header text color and header color seperately per page.. I tried the first mentioned CCS code, but it doesn't work? I'd also like to change the text in the headers of certain pages.

Could you guys please help? The Website is www.residiahome.com.

Thank you in advance 😇

On 3/27/2024 at 8:55 PM, Joella1993 said:

Hi there,

came across this thread but I couldn't find the answers I'm looking.. Hoping it's still active! 

I'd like to change the header text color and header color seperately per page.. I tried the first mentioned CCS code, but it doesn't work? I'd also like to change the text in the headers of certain pages.

 

Could you guys please help? The Website is www.residiahome.com.

 

Thank you in advance 😇

What is password?

Hi @tuanphan, it's 'Hello' !

On 4/3/2024 at 2:48 AM, Joella1993 said:

Hi @tuanphan, it's 'Hello' !

I suppose homepage, you need to change nav items color, logo color... you can use this code to Page Header Code Injection (if the plan doesn't support Code Injection, you can edit page > Add a Code Block)

<style>
  /* header color */
/* navigation items */
header#header div.header-nav-item>a {
    color: #f1f !important;
}
/* Login text */
header#header [class*="auth"] {
    color: #f1f !important;
}
/* Social Icons */
header#header [class*="social"] svg {
    fill: #f1f;
}
/* Cart icon */
header#header [class*="cart"] svg {
    fill: #f1f;
    stroke: #f1f !important;
}
/* Cart quantity */
header#header span.sqs-cart-quantity {
    color: #f1f;
}
/* Buttons */
header#header a.btn {
    background-color: black !important;
    color: white !important;
}
/* Burger Icon */
header#header .burger-inner>div {
    background-color: #f1f !important;
}

/* WeGlot */
    span.current-language-name, span.chevron.chevron--down {
        color: #f1f !important;
    }
</style>

Hi, I am trying to change the background color for the header on all of my blog post items. 

I tried using the following code in the 'Post Blog Item Code Injection' but it doesn't seem to work.

#item-654a837922e1532a3daf761a header.Header {background-color: #0C1926} 

Can you tell me what I'm doing wrong? Thanks in advance

proctimise.squarespace.com   pw: lucy

On 4/9/2024 at 12:01 AM, tucecoop said:

Hi, I am trying to change the background color for the header on all of my blog post items. 

I tried using the following code in the 'Post Blog Item Code Injection' but it doesn't seem to work.

#item-654a837922e1532a3daf761a header.Header {background-color: #0C1926} 

Can you tell me what I'm doing wrong? Thanks in advance

proctimise.squarespace.com   pw: lucy

 

 

 

I see you figured it out with this CSS code

body[class*="collection-type-blog"].view-item header#header {
    background-color: #0c1926 !important;
}