Making header different on homepage than rest of site

Site URL: http://www.fetchnpetphotography.ca

I would love some help on how to have my homepage header on a different setting than the rest of the site.

For example I want the homepage on transparent so I can have a large image blend in with the header but for all other pages just a black background header. 

I tried this https://support.squarespace.com/hc/en-us/articles/360000667707-Building-a-site-header#toc-header-background

but I dont want the rest of the page to be black for my pages. I want a black header with white text and then white background for the content of the page (right now I can only figure out how to have it all as black on a page and not black header with the rest page white background) 

any ideas? 

21 hours ago, rcr said:

Site URL: http://www.fetchnpetphotography.ca

I would love some help on how to have my homepage header on a different setting than the rest of the site.

For example I want the homepage on transparent so I can have a large image blend in with the header but for all other pages just a black background header. 

I tried this https://support.squarespace.com/hc/en-us/articles/360000667707-Building-a-site-header#toc-header-background

but I dont want the rest of the page to be black for my pages. I want a black header with white text and then white background for the content of the page (right now I can only figure out how to have it all as black on a page and not black header with the rest page white background) 

 

any ideas? 

Hi. Your site is private. Can you setup password & share url again?

Hi! I am curious about the same thing. 

Here is my url: https://mouse-helicon-9twm.squarespace.com/

Password: rayehinesvaa

Thanks! 

On 7/30/2021 at 8:11 PM, rayehines said:

Hi! I am curious about the same thing. 

 

Here is my url: https://mouse-helicon-9twm.squarespace.com/

Password: rayehinesvaa

 

Thanks! 

Hi. You mean change logo color on other pages?

I would like to be able to keep the home page header on the transparent setting and select a color scheme that would be across the rest of the pages header. Is that possible?

21 hours ago, rayehines said:

I would like to be able to keep the home page header on the transparent setting and select a color scheme that would be across the rest of the pages header. Is that possible?

Add to Design > Custom CSS

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

Thank you so much for this!! 

This did work, but I am wondering one last thing - is it possible to choose a different site style? For example, the home page would be set as transparent, but then the other pages I would have a different site style selected so that I could make the colors of the menu and what not different? 

Thank you so much for your help! 

Hi there!

My site is https://soybean-krill-spfn.squarespace.com/config/design/custom-css.

I would like to have a white logo and navigation text on the front page and spa services page and then a black logo and navigation text on all the other pages.

Any chance this is possible?

Thank you!

@KyleNathan

I suggest that you set your site logo to one that is black. Then for the home page we can use some CSS to invert the logo from black to white.

After that is done, add the following to Design > Custom CSS.

.homepage .header-title-logo {

  filter : invert( 100% );
  
  }

Let us know how it goes.

@creedonThank you!

@creedon is it also possible to invert the page links?

2 hours ago, Smollys97 said:

is it also possible to invert the page links?

It is possible to use a filter on links but I don't think it will achieve a good effect. I suggest changing the actual color of the links with the color property.

Please post the URL for a page on your site where we can see your issue.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site. Please read the documentation at the link provided to understand how it works.

Please read the documentation at the link provided on how to share a link to your site to understand how it works. A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

We can then take a look at your issue.

Thanks for the reply!

You mean this link? 

https://cuboid-grasshopper-7zfs.squarespace.com/config/ 

Here is the text white!

https://cuboid-grasshopper-7zfs.squarespace.com/config/pages/62f3cd164c245a172be1b836

This is the link of the portfolio page, here I want the heading tekst to be black!

Hopefully this is what you meant

thx!

On 8/15/2022 at 11:21 PM, Smollys97 said:

Thanks for the reply!

 

You mean this link? 

https://cuboid-grasshopper-7zfs.squarespace.com/config/ 

Here is the text white!

 

https://cuboid-grasshopper-7zfs.squarespace.com/config/pages/62f3cd164c245a172be1b836

This is the link of the portfolio page, here I want the heading tekst to be black!

Hopefully this is what you meant

 

thx!

Hi,

It is admin url.

To find portfolio page url, just hover on Portfolio page on Pages > Main Navigation or Not Linked > Click Gear icon > Look at URL Slug

18 hours ago, tuanphan said:

To find portfolio page url, just hover on Portfolio page on Pages > Main Navigation or Not Linked > Click Gear icon > Look at URL Slug

Another option if you are on the page itself in Preview you can click on the upper right arrow to go into Full Preview and get the URL from the address bar.