Jump to content

Change the header style for ONE PAGE ONLY!

Go to solution Solved by tuanphan,

Recommended Posts

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 

Link to comment

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.

Link to comment

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 

SS-CC.jpg

Link to comment
  • 5 months later...
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 month later...

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.

Link to comment
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/

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 4 weeks later...

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: 

Style options

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.
 
Link to comment
  • 2 months later...
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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.

Link to comment
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.

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.

Link to comment
  • Solution
On 3/13/2024 at 6:19 AM, MariElisabeth said:

Use this code to Website > Website Tools > Custom CSS
 

body#collection-65ea33355bf9ff79a2f703bd header#header {
    display: none !important;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 weeks later...

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 😇

Link to comment
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?

image.png.503912b0b938610fe1d4cb43b17edb22.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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>

image.thumb.png.b1e6158bc22349d89c3e04baac49cd89.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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

 

 

 

Link to comment
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.