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

Popular posts from this blog

java - Custom OutputStreamAppender not run: LOGBACK: No context given for <MYAPPENDER> -

java - UML - How would you draw a try catch in a sequence diagram? -

c++ - No viable overloaded operator for references a map -