jquery - Replace an element when the window width is less than something -
the nav bar when resize browser window, logo stays under nav bar, come solution replace navbar when window lesser 500px image jquery isn't working.
can please take look? , tell me what's wrong? thank you!
function resizefunction() { if($(window).width() > 500) { if(!$('.head').hasclass('greater')) { $('#menu').show(); } } else { if(!$('.head').hasclass('less')) { $('#menu').hide(); $('#navbarbutton').addclass('less'); } } }
.head header, #menu navbar , want replace button #navbarbutton. on html #navbarbutton style="display:none".
can not achieve in pure css?
use media query set #menu display:none when less 500px , #navbarbutton display:block in same media query.
in css rest of page (when on 500px) set #navbarbutton display:none , #menu display:block.
something this:
#menu { display:none } #nanvbarbutton { display:block; } @media (min-width:500px) { #menu { display:block } #nanvbarbutton { display:none; } }
remember easier css smaller screen versions first.
Comments
Post a Comment