Jump to content

Nav Menu logo color change

Recommended Posts

Site URL: https://www.menos.cc

Hey, I'm trying to invert the logo color of my website ONLY on the navigation menu on mobile devices.

(Or, even better, make my logo 'smart' so it inverts to white on dark backgrounds/images, and keeps black color on light backgrounds).

Any help? Any of those options would do :)

Link to comment

Hi @andrehanauer

To invert the logo color on mobile, try adding this to Design > Custom CSS:

@media screen and (max-width:767px)
{ 
  .header-title-logo img {
    -webkit-filter: invert(100%);
 	filter: invert(1);  
	filter:progid:DXImageTransform.Microsoft.BasicImage(invert='1');
  }
}

 

Link to comment
13 hours ago, christyprice said:

Hi @andrehanauer

To invert the logo color on mobile, try adding this to Design > Custom CSS:


@media screen and (max-width:767px)
{ 
  .header-title-logo img {
    -webkit-filter: invert(100%);
 	filter: invert(1);  
	filter:progid:DXImageTransform.Microsoft.BasicImage(invert='1');
  }
}

 

Hi, Christy! Thanks for the help! That worked nicely, but I guess I didn't make myself clear: I want the logo to change only when the Nav Menu (after clicking the burger) is open, as this makes my background color change to black, hiding my black logo.

Thanks in advance!

Link to comment
14 hours ago, christyprice said:

Ah, I see. I don't know of a way to target that specifically - it looks like it has the same collection-id whether it is opened or closed. Maybe someone else can help out!

It seems that SS has added a class to the body, when we click on Burger Menu. We can target that class.
The body has too many classes, it will take long time to look closely and find the class 😂

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
4 hours ago, tuanphan said:

It seems that SS has added a class to the body, when we click on Burger Menu. We can target that class.
The body has too many classes, it will take long time to look closely and find the class 😂

Any ideas on finding that? I don't know any coding, just to inform you 😅

Link to comment
1 minute ago, andrehanauer said:

Any ideas on finding that? I don't know any coding, just to inform you 😅

Well, I could actually find some that make sense:

 

header-menu-bg

header-menu-nav

header-announcement-bar-wrapper

...

 

How can I code targeting those classes? So I can try one by one until it works 🙂

Link to comment
44 minutes ago, andrehanauer said:

Well, I could actually find some that make sense:

 

header-menu-bg

header-menu-nav

header-announcement-bar-wrapper

...

 

How can I code targeting those classes? So I can try one by one until it works 🙂

I DID IT. I'M FEELING LIKE A PRO RIGHT NOW. Here's the code, can you check if it makes sense (it looks like everything is fine):

.header--menu-open {
@media screen and (max-width:767px)
{ 
  .header-title-logo {
    -webkit-filter: invert(100%);
 	filter: invert(1);
			filter:progid:DXImageTransform.Microsoft.BasicImage(invert='1');
  }
}
}

 

Link to comment

Nice work @andrehanauer! You can simplify the code a bit, since the .header--menu-open is only used on mobile: 

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

It's awesome that you took the info here and ran with it and figured things out on your own. Great job!

Link to comment
4 hours ago, christyprice said:

Nice work @andrehanauer! You can simplify the code a bit, since the .header--menu-open is only used on mobile: 


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

It's awesome that you took the info here and ran with it and figured things out on your own. Great job!

Great! Thank you very much for all the support 🙂

Link to comment
  • 2 months later...

I have a single page in my site that I used the below code to invert my logo from white to black which works perfectly...however now it doesn't show up on the black background on the mobile menu (only page with this issue since all other site pages have white logo). Is there a way to combine both the below code and the one that you created above for this one page so it stays inverted (black on white) but then changes back to white on black for the mobile menu only?

<style>

.header-title-logo img {

    -webkit-filter: invert(100%);

    filter: invert(100%);

  filter:progid:DXImageTransform.Microsoft.BasicImage(invert='1');

  }

</style>

Link to comment

Hi Jesse, 

Do you mean when the mobile menu is open? If so, add this to 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
On 4/16/2020 at 1:19 PM, christyprice said:

Hi Jesse, 

Do you mean when the mobile menu is open? If so, add this to Design > Custom CSS


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

 

Hi Christy, 

The issue I'm having is that code then changes all of my other pages which are currently fine....I'm using white logos overlaid on images for all other pages but needed to create one white page in my site so I used the code to invert the main logo for this one page from white to black for this one page only, but then I noticed that on mobile when you click on the hamburger to open the menu the now inverted logo doesn't show for this one page because it's a black background. I'm probably making this difficult on myself ; )

Not sure if it's possible to have main logos white on some pages and black on others but then have them all show up on the open mobile menu which has a black background only?

 

 

Edited by JSummers
Link to comment
  • 3 months later...
<!-- invert your logo, paste this in, page settings, advanced section on a per page basis -->
<style>
.header-title img {
    -webkit-filter: invert(100%);
    filter: invert(100%);
  filter:progid:DXImageTransform.Microsoft.BasicImage(invert='1');
  }
</style>

Cogwheel.thumb.jpg.89be3af58165bc8601b358a67f2870e0.jpg

 

Christy, thank you for the inspiration, works great in v7.1 (on any 7.1 template of course)

 

 

Edited by AlexSantos
all text disappeared.
Link to comment
  • 2 weeks later...

 

On 2/10/2020 at 8:38 PM, christyprice said:

Nice work @andrehanauer! You can simplify the code a bit, since the .header--menu-open is only used on mobile: 


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

It's awesome that you took the info here and ran with it and figured things out on your own. Great job!

 

Hi, I'm trying to do this on my site too, I added the code into the custom CSS and nothing happened, any idea why? I'm using 7.1 if that makes a difference.

 

Thanks

Link to comment
7 hours ago, bcewq said:

 

 

Hi, I'm trying to do this on my site too, I added the code into the custom CSS and nothing happened, any idea why? I'm using 7.1 if that makes a difference.

 

Thanks

Can you share site url? We can check easier.

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 4/17/2020 at 12:19 AM, christyprice said:

Hi Jesse, 

Do you mean when the mobile menu is open? If so, add this to Design > Custom CSS


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

 

 

15 hours ago, bcewq said:

SS updated Logo class on Mobile. New code

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

 

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
1 hour ago, tuanphan said:

 

SS updated Logo class on Mobile. New code


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

 

AMAZING, thank you!!

Link to comment
  • 1 month later...
On 10/14/2020 at 6:15 PM, eugenesoch said:

Is there a way of completely replacing the image i.e. I have logo that is multicolour, but on open NAV I want it to be white? 

Thank you in advance! 😉

Can you share site url? We can check easier.

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
  • 1 month later...
On 8/22/2020 at 7:42 AM, bcewq said:

 

 

Hi, I'm trying to do this on my site too, I added the code into the custom CSS and nothing happened, any idea why? I'm using 7.1 if that makes a difference.

 

Thanks

Hi 

I am also trying to do this on my site, I want the logo and menu to change to white when it scrolls over a dark background. I cut and pasted some of the codes from this feed into the css box but nothing happens - please help!

www.thisisarca.com

Thanks

Link to comment
  • 4 months later...
On 2/10/2020 at 8:38 PM, christyprice said:

Nice work @andrehanauer! You can simplify the code a bit, since the .header--menu-open is only used on mobile: 


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

It's awesome that you took the info here and ran with it and figured things out on your own. Great job!

Hi,

Is there anyway to invert the logo colour on the mobile nav menu for specific pages? Our logo is black and white across our desktop pages depending on our top background, meaning they need to change on the mobile as well but the code injection doesn't effect the nav menu?

Thanks in advance 

Link to comment
On 3/26/2021 at 4:16 AM, abock_ said:

Hi,

Is there anyway to invert the logo colour on the mobile nav menu for specific pages? Our logo is black and white across our desktop pages depending on our top background, meaning they need to change on the mobile as well but the code injection doesn't effect the nav menu?

Thanks in advance 

Can you share link to your site? This can solved with some simple CSS

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

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.