Jump to content

Different color header/logo on different pages

Recommended Posts

Below you will see my header/logo from my site homepage.  I want it to be white on the homepage as shown in the screen shot.  However, on my other pages, the background is white and therefore you can't see the header/logo because they are also white.  Is it possible to keep the header/logo white on the homepage as shown, but change it to black on other pages?

Screen Shot 2020-10-03 at 10.38.46 AM.png

Link to comment
  • Replies 9
  • Views 2.8k
  • Created
  • Last Reply

@kiiana

Hi, If you are using one of the Brine - Family  Squarespace 7 Template  with a normal business plan this is a solution:
1. Upload the file with the black logo : got to > design > custom CSS  >  Manage Custom Files (gray field at the bottom)> upload the image / logo
Then make a space inside  the CSS window for it and clic on the image in the "file box"
The image URL will be shown in the CSS box in a gray color. 

2. Copy  the URL ( and delete it there after:-)  Save the URL somewhere.

3. Then go to all pages where you want the black version and copy the code  below into the PAGE >  Header >Advanced > Code injection.
replace the sample URL and put yours in. Thats it.

Good luck.

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<script>
  $(function() {$('.Header-branding-logo, .Mobile-bar-branding-logo') .attr('src', 'https://static1.squarespace.com/static/longstringofnumbersandthenthefilename.jog
</script>
Link to comment

@kiiana Your website is currently private. It looks like a Squarespace 7.1 site but it will really help us if you set a site password and tell us what it is so that we can view the site.
 

About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥.
Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. 
Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional.

Link to comment
  • 2 weeks later...
On 10/3/2020 at 12:04 PM, SabineM said:

@kiiana

Hi, If you are using one of the Brine - Family  Squarespace 7 Template  with a normal business plan this is a solution:
1. Upload the file with the black logo : got to > design > custom CSS  >  Manage Custom Files (gray field at the bottom)> upload the image / logo
Then make a space inside  the CSS window for it and clic on the image in the "file box"
The image URL will be shown in the CSS box in a gray color. 

2. Copy  the URL ( and delete it there after:-)  Save the URL somewhere.

3. Then go to all pages where you want the black version and copy the code  below into the PAGE >  Header >Advanced > Code injection.
replace the sample URL and put yours in. Thats it.

Good luck.


<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<script>
  $(function() {$('.Header-branding-logo, .Mobile-bar-branding-logo') .attr('src', 'https://static1.squarespace.com/static/longstringofnumbersandthenthefilename.jog
</script>

Thank you so much!! That worked amazing!!! Now, do you know how I could do the same with all of the navigation links in my header? They are also white on the home page but I would like them to be black on other pages

Link to comment
1 hour ago, kiiana said:

I'm unable to make a site password at this time

The web professionals who answer questions on this forum are offering their time for free, to help you and the Squarespace community. They ask to see your site so that they can be confident that their solution will work, which will save you both valuable time. 

You can set a site password on any site - including trials - by following this guide

About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥.
Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. 
Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional.

Link to comment
On 10/16/2020 at 12:55 PM, paul2009 said:

The web professionals who answer questions on this forum are offering their time for free, to help you and the Squarespace community. They ask to see your site so that they can be confident that their solution will work, which will save you both valuable time. 

You can set a site password on any site - including trials - by following this guide

I have been trying to do this for weeks and for some reason my site does not allow me to create a site password.  I keep getting an "error" when I try to do it.  Do you know why that could be?

Link to comment
50 minutes ago, kiiana said:

I keep getting an "error" when I try to do it.  Do you know why that could be?

It’s difficult to say as I don’t have access to your site. I recommend you contact Squarespace Customer Care about that issue. 

About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥.
Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. 
Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional.

Link to comment

Archived

This topic is now archived and is closed to further replies.

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