Media Queries not working properly after Javascript alters element CSS

Question

any idea why in the example below, media queries stops changing the height of the menu bar after it's been changed by js? (make window small and click on the arrow to expand the mini menu). Do I need to register a point of origin for the menu element or something?

CSS:

#menu {
    position: fixed;
    left: 0px;
    bottom: 0px;
    width: 100%;
    height: 90px;
    z-index: 11000;
    opacity: 1;
    background-color: #F03600;
    }

JS:

if ($("#arrowup").css('top') == '0px') {
    $("#menu").animate({'height':'270px'}, 800, "easeInOutQuint");
    } else {
    $("#menu").animate({'height':'55px'}, 800, "easeInOutQuint");
    }

You can check out the page here, all the code's on a single page:

http://www.nioute.co.uk/stuff/

Also, what's a good read with regards to media queries / js interaction?

Thanks!

Answer 1

The reason the media queries don't work is because when you modify the bar with Javascript, it applies inline-css. This overrides CSS that you may have in your stylesheets. The problem seems to be, when you toggle the arrow back down, #menu has an inline style of height="55px" applied to it, which blocks the regular style of 90px on a larger size.

The solution would be to clear the style when the window is resized to larger than your media query breakpoint using something like $(window).resize(function()...); and checking the current width of the window against your breakpoint. If it returns true, call $('#menu').attr('style', ''); and that will remove the inline style.

Answer 2

You can use class for adding some styles to elements and removing they after the job instead of getElementById(#menu).style.height = ...

for example:

getElementById(#menu).classList.add("newHeight")

Or

getElementById(#menu).classList.remove("newHeight")