Navigation displays block after multiple resizes

[Jtwa11]

When I resize the screen everything works correctly. But once I resize again, it doesn’t work the way I want it to.

The navigation li appears as block elements when I want them to display none unless I click on menu.

http://codepen.io/Jtwa/pen/WQPzVB?editors=001

[Shikkediel]

Like this?

Demo

What you describe happens because .show() adds display: block as inline style. And it’s overriding the CSS you defined for it with that. I’ve just put a .hide() in the else condition. Also cached the $('nav ul') selector since it’s used quite a few times.

[Jtwa11]

Perfect. Thank you for the help

[rocksmethew]

function throttle (callback, limit) {
var wait = false; // Initially, we’re not waiting
return function () { // We return a throttled function
if (!wait) { // If we’re not waiting
callback.call(); // Execute users function
wait = true; // Prevent future invocations
setTimeout(function () { // After a period of time
wait = false; // And allow future invocations
}, limit);
}
}
}

$(window).on(‘resize’, throttle(yourResizeFunction, 200))

[Author]

Posts