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

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

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.
Catch up on all the release notes and announcements 2023 [for Circle members only] (there's a public version here)

Buy me a coffee

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

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.
Catch up on all the release notes and announcements 2023 [for Circle members only] (there's a public version here)

Buy me a coffee

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. 

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.
Catch up on all the release notes and announcements 2023 [for Circle members only] (there's a public version here)

Buy me a coffee

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.