jquery - Elements with display:none show on load -

for cross browser certainty etc have used 2 menus, 1 desktop , 1 mobile. media queries display 1 , hide other. problem is, when ctrl + f5 or navigate page on mobile version desktop menu shows few seconds on load. ideas?

that's called fouc (flash of unstyled content) , usual cause javascript running on page load. browsers hold off on displaying page few seconds (or tenths of second) before displaying. run site through webpagetest.org , zoompf.com identify issues slowing down page load.

to in short term, add style attribute element when generate page, , set value dynamically, e.g. php:

<div id="desktop-menu" style="display:<?php echo $mobile ? 'none' : 'block'; ?>"> 

edit: i've noticed you've tagged page jquery. presumably hiding element code this:

$(function(){$('desktop-menu').toggle();}); 

that runs when web browser has finished loading page. best thing in case inline css diaply:none style attribute, , dump jquery call.