WordPress Responsive Menu
Navigation is a important aspect for better user experience in mobile devices.Creating a responsive menu in WordPress isn't tough task without using a plugin.If you are not a techie then consider adding a WordPress responsive menu plugin to your website.
Follow this step by step tutorial to create a responsive navigation menu to your WordPress site and provide an awesome viewing experience for your mobile visitors.
Add a New Menu Location by adding the following code to your WordPress theme functions.php file.
function extra_setup() {
register_nav_menu ('primary mobile', __( 'Navigation Mobile', 'twentythirteen' ));
}
add_action( 'after_setup_theme', 'extra_setup' );
Open your header.php file,search for mob nav menu and replace with the following code.
<!--?php wp_nav_menu( array( 'theme_location' =--> 'primary mobile', 'menu_class' => 'nav-menu' ) ); ?>;
To set the CSS classes for the menus,use wp_nav_menu_args to show primary and mobile navigation menu's.Add the following code to your theme's functions.php file.
function set_container_class ($args) {
$args['container_class'] = str_replace(' ','-',$args['theme_location']).'-nav'; return $args;
}
add_filter ('wp_nav_menu_args', 'set_container_class')
Finally style them in CCS differently,adding the following code to your css style sheet it makes responsive menu in your WordPress website.
.primary-mobile-nav {
display: none;
}
@media (max-width: 643px){
.primary-nav {
display: none;
}
.primary-mobile-nav {
display: block;
}
}
Finally navigate to appearances > menu > select mobile menu
Best WordPress Responsive Menu plugins
If you don't want play with code,simply use any one of the following plugins to make your WordPress mobile menu to responsive.In WordPress plugins directory,you can find many plugins.Here some of the best plugins,which makes responsive menu to your WordPress site.
1.Responsive Menu
2.WP Responsive Menu
3.Simple Responsive Menu
4.Royal Responsive Menu and
5.jQuery Responsive Select Menu.