Jump to content

Logo / Navigation

Recommended Posts

Site URL: https://www.mozerisfineantiques.com/

Hello,

I have an issue, where my navigation and logo are visible on the home page.

When you visit my shop page in jewelllery section, the page background is white, then my logo and navigation is no longer visible.

How can I change this just for one single page, as im on 7.1 the colour themes end up changing on all website.

 

I have highlighted below on what I mean.

 

Thanks any help is greatly appreciated! Please let me know if I've been unclear.

 

1074361069_logonotvisible.thumb.png.0b7a139bb7049aba0704fa98d163ea57.png

 

Link to comment
  • Replies 14
  • Created
  • Last Reply

Top Posters In This Topic

Put this in the advanced header of the page you need to invert the logo. 
<style>
 .header-title-logo img {
    -webkit-filter: invert(100%);
    filter: invert(100%);
  filter:progid:DXImageTransform.Microsoft.BasicImage(invert='1');
  }
</style>

Want to invert the logo on the mobile menu page in 7.1? Rather than using the Code Injection steps above, simply paste this code into Design > Custom CSS:

.header--menu-open .header-title-logo img {
    -webkit-filter: invert(100%);
    filter: invert(100%);
  filter:progid:DXImageTransform.Microsoft.BasicImage(invert='1');
  }
Link to comment

Is there way to keep the original colour of my logo? Its turned purple when supposed to be green.

 

Also I wanted to ask if I can do the same for my navigation. I have highlighted below, the text is not visible because it's white. What code can I use to make it black?

 

Thanks so much for your help.

ss.png

Link to comment

Add to Home > Design > Custom CSS

/* black navigation */
.collection-type-products.view-list .header-nav a {
    color: black !important;
}

 

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
On 5/28/2020 at 12:54 PM, tuanphan said:

Add to Home > Design > Custom CSS


/* black navigation */
.collection-type-products.view-list .header-nav a {
    color: black !important;
}

 

Thank you!

 

Would you possibly know how to make the logo visible on my products page? I have tried above suggestion but inverting it makes it purple.

 

Just for this page alone, I would like my black logo, I have the file for it. But when you select logo image, it does the same image through all website.

Appreciate the help.

Link to comment
16 hours ago, Faustas said:

Thank you!

 

Would you possibly know how to make the logo visible on my products page? I have tried above suggestion but inverting it makes it purple.

 

Just for this page alone, I would like my black logo, I have the file for it. But when you select logo image, it does the same image through all website.

Appreciate the help.

It seems you solved?

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
On 6/2/2020 at 3:48 PM, Faustas said:

Sadly I have not.

The Navigation is no longer visible here : 

https://www.mozerisfineantiques.com/timepieces


But You can see it here.
https://www.mozerisfineantiques.com/all?category=Jewellery

 

How can I edit the pages individually? The logo aswell, you can see it on home page, but not in the shop section.

How can I fix this?

Thanks

Find this code in Custom CSS

.collection-type-products.view-list .header-nav a {
    color: #000 !important;
}

and edit #000 to #fff

 

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
On 6/10/2020 at 10:19 AM, tuanphan said:

Find this code in Custom CSS


.collection-type-products.view-list .header-nav a {
    color: #000 !important;
}

and edit #000 to #fff

 

Thank you, it helped but not fully... I can't seem to solve this.

 

again same problem, one page navigation is visible, and on the other page it's not visible. The same for the logo...

How can I make the above code work but for one page only?

d.png

v.jpg

Link to comment
On 6/12/2020 at 11:58 PM, derricksrandomviews said:

Put this in the page settings advanced header code injection use style at both ends
<style>
.collection-type-products.view-list .header-nav a {
    color: #000 !important; 

<style>

 

Any way to change the navigation links colour, just for my shop page? 

The colour changing in design, applies it to the whole website, I want just for one page?

This code kind of spoils the look I'm going for. Thank you for your efforts nevertheless, much appreciated.

Link to comment
On 6/15/2020 at 10:38 PM, Faustas said:

Any way to change the navigation links colour, just for my shop page? 

The colour changing in design, applies it to the whole website, I want just for one page?

This code kind of spoils the look I'm going for. Thank you for your efforts nevertheless, much appreciated.

Add to Shop Page Settings > Advanced > Header, Not Code Injection

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
  • 2 weeks later...
On 7/1/2020 at 8:02 PM, beckloren said:

Hey, I used your tips above and managed to change the navigation colour to black on my product page - thank you. I am not sure how to add it onto my about page too https://cockandtail.squarespace.com/about

Thank you!

Add to Page Settings > Advanced > Header

or add Code Block > Paste code

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

Found the fix...

Along with the code you have showed me, which turned my background black along with my navigation.

I have simply added - 

<style>
 body {background-color: pink;}
 #canvas {background-color: pink;}
</style>

That has sorted the issue.

 

I now have one question about my logo, how can I fix my logo?

As it uses the same file for the whole website, I have a file with black font, can I change the logo just for my shop page?

www.mozerisfineantiques.com

 

22.png

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.