Nav Menu logo color change

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 :)

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');
  }
}

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!

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!

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 😂

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 😅

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 🙂

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');
  }
}
}

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!

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 🙂

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>

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');
  }

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?

Try adding the code above inside the <style></style> code for that page.

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

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

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

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.

5 hours ago, tuanphan said:

Can you share site url? We can check easier.

https://flugelhorn-bison-kx3a.squarespace.com/

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:

https://flugelhorn-bison-kx3a.squarespace.com/

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');
}

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

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! 😉

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.

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

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 

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