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

Nav Menu logo color change


andrehanauer

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

Link to post
  • Answers 22
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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%); fi

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(

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!

Posted Images

22 answers to this question

Recommended Posts

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

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

 

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- Pour your heart into it

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

 

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!

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!

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 😂

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- Pour your heart into it

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 😅

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 🙂

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

 

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 🙂

Link to post
  • 0

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 post
  • 0

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

 

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 post
  • 0
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 post
  • 0
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 post

Create an account or sign in to comment

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


×
×
  • Create New...