How to make responsive menu in wordpress
If you don’t have proper knowledge in jQuery and CSS you can’t make responsive design in wordpress site. It is not easy or not hard to make wordpress menu. Just follow my commend. First add this html in your wordpress header.php file
<div class="pc" id="menu"> <?php $defaults = array( 'theme_location' => 'menu_top', 'menu' => '', 'container' => 'div', 'container_class' => '', 'container_id' => '', 'menu_class' => 'menu', 'menu_id' => '', 'echo' => true, 'fallback_cb' => 'wp_page_menu', 'before' => '', 'after' => '', 'link_before' => '', 'link_after' => '', 'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>', 'depth' => 0, 'walker' => '' ); wp_nav_menu( $defaults ); ?> </div>
Next you need to add this jQuery script in header.php before closing </head> tag
<script type="text/javascript"> jQuery( document ).ready(function() //Create mobile drop down menu function toggleMenu(){ if (jQuery('#wraper').width() < 320 ){ //initially hide navigation jQuery("#menu").removeClass("pc"); jQuery("#menu").addClass("mobile"); }else{ jQuery("#menu").removeClass("mobile"); jQuery("#menu").addClass("pc");}; }; //call function on load and page resize jQuery(window).load(toggleMenu); jQuery(window).resize(toggleMenu); }); </script>
Thanks