Fadein and fade out JS, media query css display:none doesnt work.

[revolutiong]

I have duel mobile menu system, I want to hide the toggles, when I go full screen. However, once the fadeIn and fadeOut is called, it seems the toggles are place in the DOM in such a way the my media query display:none can’t access it.

Sure its a easy fix, below is my code pen.

See the Pen FxJea by rgfx (@rgfx) on CodePen

Thanks

[Josh]

Yep, you’ve got it right . . . .fadeIn() adds an inline style of display: block; to .menu-link.

This is what I’d do, I think: http://codepen.io/JoshBlackwood/pen/euDbg

Remove the .isShown class altogether and toggle the .isHidden class. You’ll want to play around with it to get the delay right, of course.

[revolutiong]

New to js, my instincts told me I didn’t need if then statement. I fixed the issue also by doing display: none !important; But I like your method more.

Thanks for your time, greatly appreciated.

[Josh]

Sure thing, anytime!

[Author]

Posts