Do media queries ignore html5 elements?

HTML & CSS
1

Originally I had this in a media query and everything was ok.


@media (max-width: 870px){
    #menu {
        left: 0;
    }
    #layout{
        padding-left: 0;
        position: relative;
    }
    #navLink{
        display: block;
    }
}

Then I changed #menu to nav ( changed all coresponding code in my .html and .css file )

and my page breaks. Changed it back and it works.

Do I div#menu or nav#menu. Do media queries not understand new HTML5 elements?

2

css should hook into the new html5 elements just fine. Can we see the full css and the full html, both for the working example, and for the non-working? I’m betting it’s something which another pair of eyes will pick up on.

3

ok, Chrome’s developers tools has slightly different features that FireBug so I was able to see that changing <div id=“menu”> to <nav> makes specificity of the responsive library I’m using http://purecss.io/ change.

Thanks for looking though.

4

Then just use <nav id=“menu”> for the same specificity.