Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
andrehanauer

Nav Menu logo color change

Question

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

Share this post


Link to post

9 answers to this question

Recommended Posts

  • 0

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

 

Share this post


Link to post
  • 0
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!

Share this post


Link to post
  • 0

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!

Share this post


Link to post
  • 0
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 😂


COVID-19Free priority support for all users (29/03 - 30/04). You can tag me (@tuanphan) or send to my email.

With paid support, see here

How to Setup Password & Share URL

 

Share this post


Link to post
  • 0
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 😅

Share this post


Link to post
  • 0
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 🙂

Share this post


Link to post
  • 0
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');
  }
}
}

 

Share this post


Link to post
  • 0

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!

Share this post


Link to post
  • 0
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 🙂

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...