Jump to content

Change the header style for ONE PAGE ONLY!

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.