Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Making header different on homepage than rest of site


rcr

Question

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? 

Link to comment

9 answers to this question

Recommended Posts

  • 0
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?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0

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! 

Link to comment
  • 0

@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.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

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...