CSS media queries help with hiding elements again.?

What do you mean, "the browser is expanded"? Who actually does that in the real world? When you go into Chrome's dev mode, Chrome even tells you to reload the page after resizing, exactly for the reason that some elements might not respond correctly.

I get that you want it to be perfect but imo this is a waste of time.

If you absolutely must create a page that even works correctly if some idiot tries to actively break it, handle window.onresize using JavaScript of jQuery.

Edit after update:

Of these millions of people, 99,99% have no idea this feature even exists. Those that know it exists will use it in very specific cases, where they need two windows side-by-side.

Anyway, I already told you how to fix this: window.onresize

Code: http://jsfiddle.net/o4otjv2f/

That's not what media queries do. Why would you want to prevent someone from using your full site if they expand the window beyond 800 pixels?

I mean, the whole purpose of media queries is to handle this automatically.

If you want to detect whether the user is on a mobile or desktop, then you need to look at the max-device-width property. Take a look at this site:

http://nmsdvid.com/snippets/

It is a best practice to design mobile first. So design with the mobile menu, then add a breakpoint when things start to look awkward as you scale the window width. It should be along the lines of @media (min-width: 800px) then you take it away and adjust as needed, etc.