Trending

Post Top Ad

Monday, November 18, 2019

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

No comments:

Post a Comment

Post Top Ad