Coder Tune
helping people learn and earn online

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

Leave A Reply

Your email address will not be published.