[Resolved] How to change logo on mobile version when click hamburger

[John]

Hi there,

Is it possible to change the logo on the mobile version when the hamburger toggle is clicked?
Or is it easier to use css to change the background/font colors?
I have a dark logo which I can use on the white background and hoping there is a snippet I can use to make that happen.
Many thanks!
John

[David]

Hi there,

no easy way to swap the logo on menu open – it would require JavaScript and the result could be jumpy or not work if the user has something blocking JS.

Changing the mobile header colors would make more sense. If you edit your Header Element and enable the merge only on Desktop then you will be able to control the Primary Navigation colors via the Customizer.

[John]

Is there a way to do this without affecting how the Sticky Nav appears?
I don’t want to chnage the logo as it appears on sticky nav (which is a different colored one)
Or is it best to just target the mobile color css?

[Tom]

Hi there,

So the logo isn’t visible when you open the mobile menu, but it is before that? How is the navigation changing colors when the menu is opened vs closed?

Let me know 🙂

[John]

I just used css to target the mobile colours and all is good now.
Thanks!

[Tom]

No problem 🙂

[Author]

Posts