WordPress Tutorials

Creating a Responsive Navigation Menu in WordPress

The best and the easiest way of making WordPress navigation menu’s responsive is to use the SelectNav.js JavaScript library. It works itself without having to require third party libraries like the jQuery. It takes all the menu details, replicate them and transfers them in <select> based dropdown menu from where you can later manually select the menus that you want to display.

In some cases, you might need to use media queries depending on your theme state however in most of the time you will not have to do it. In fact, the advantage of SelectNav.js is that irrespective of menu style the responsiveness will work for all keeping the style difference away. That’s all you need to do in creating responsive navigation menu in WordPress, isn’t it so easy?

Actually turning your navigation menu responsive is not easy, it is one of the most challenging parts and many times it will not work perfectly because the theme we use for each site has lots of internal relation with making the menus responsive. However, the good news is that the recent WordPress versions are having built in responsiveness compatibility which makes it cool with the themes to perform responsively. Let us discuss how to code your WordPress navigation for responsiveness.

  1. First step is to log into your admin panel and click on the appearance and theme section.
  2. Secondly open the header file which is located in header.php.
  3. Open the file in a text editor and find the <meta name=”view” content=”width=device-width”/>
  4. The <meta name=”view” content=”width=device-width”/> is the part which you need to change to make the navigation responsive.
  5. Add ‘initial-scale=1, maximum-scale=1’ after the “width-device-width” text.
  6. Be aware you are not to replace that but add ‘initial-scale=1, maximum-scale=1’ next to it.
  7. Then save it and open the file called Single.php to remove all navigational tag details.
  8. Add followings after removing the navigational tag details:

<nav><?php wp_nav_menu(array(‘theme_location\=>’primary\));?></nav>

  1. Lastly you need to insert the below CSS styles in the styles file

{

display: none;

}

@media (max-width: 1020px)

{

Nav ul {display:none;}

Nav select {display:inline-block;}

}

  1. As a result of adding the above in the CSS styles file the drop down navigation menu will hide in desktop and the horizontal navigation will also hide.
  2. Now the navigational menus will work in desktop, laptop, ipads, tabs and in phones.

Another way of making the menu’s responsive is given below. for this one you need to have a child theme and transfer its header file content to a functions.php file to do the coding. This process follows the simplest methods involving adding new menu location then adding that new location to the header and set up the menus CSS class and lastly to amend the stylesheet for displaying the menus. Here we go:

Function extra_setup(){

Register_nav_menu (‘firstmobile’,__(‘navigation’, ‘themename’));

}

Add_action (‘post_theme_setup’, ‘extra_setup’);

<?php wp_nav_menu (array(‘themelocation’=>’firstmobile’, ‘menu_class’=>’nav_menu’));?>

Functiona set_container_class ($args){

$args [‘container_class’]=str_replace (‘’,’_’,$args[‘themelocation’]0.’-nev’; return $args; }

Add_filter(‘wp_nav_menu_args’, ‘set_container_class’)

.firstmobile-nav {

Display:none;}

@media (max-width: 1020px){

.primary-nav{

Display:none;}

.firstmobile-nav{

Display:block;}

}

Using above will make the navigation menus to become responsive.

If coding is not your work area and you still need the menus to be responsive then we would recommend the tension free ways of making that happen. Get WordPress plugins to do the work for you. There are plenty of free and premium plugins that you can use for the purpose. Few of the free plugins to make your website navigation menus responsive are Responsive Menu, WP Responsive Menu, Simple Responsive Menu and jQuery Responsive Select Menu etc.

The advantages of using these free plugins are they will instantly turn your menus into responsive one. At the same time, they will work with different menu styles like the drop down, horizontal, box select systems. Though they are free plugins they are highly customizable and come with bundles of customization options. You can even get sliding menu for your website. On the other side of these free plugins, you can think of premium ones like Mobile.Nav, Revolution Responsive Menu, Mean Menu and so on. The advantages of using the premium ones over the free ones are they perform better, have dedicated support service and offer wider range of customization facilities. They are even less technical in operation and professionally coded. As a result, possible range of problems that you may face with free plugins will not be here.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.