Building Responsive Navigation for WordPress

Responsive WordPress themes design is one of the growing trends in web design today. Web designers no longer talk of ‘web design’ but ‘screen design’. Web design has changed over the years due to emergence of smartphones and tablets. As tenets of responsive web design require, every website should be visible in a wide range of screen sizes.

When designing WordPress themes you should put into consideration that the users will use different gadget to view the website. You should therefore incorporate the ability for mobile users to view content easily. One of the most important aspects of user interface design is navigation. WordPress themes menu in particular should be designed to be mobile friendly.

Getting Started with Responsive Navigation

Majority of WordPress theme released today are built upon responsive framework like Twitter Bootstrap or Foundation Framework. These responsive frameworks utilize CSS media queries to target different gadget screen sizes and display the website appropriately. Personally, I like building WordPress themes based in Twitter Bootstrap since am adherent of the cliché ‘no need to reinvent the wheel’. Having said that, I will explain in details how you can build a responsive navigation in WordPress.

In this tutorial I will be illustrating how to build a responsive navigation in an existing WordPress theme, I will be using Twenty Sixteen theme for illustration purposes.

Step 1: Create a child theme

Create a child theme inside the wp-content/themes folder and name it twentysixteen_child. Add a style sheet inside the new theme folder and import the parent theme css in the new style sheet. The complete file should look something like this:


The twentysixteen child theme has now been created but you need to add the functions.php and the index.php files for it to be functional;


Building a Responsive Navigation in WordPress


You should also not forget to add an index.php and function.php files inside the child theme folder. Secondly, while creating child theme you should always remember that all the content of the parent theme can be copied on the child theme expect the functions.php file. You should instead create a new function.php and include any files you wish to as follows;

The reason for this restriction is the fact that both files (functions.php) are loaded and the child precedes the parent. Ideally, your new functions for creating responsive navigation should be made in the child theme’s function.php file.


Step 2: Editing viewport in the header.php file

Since not all themes are coded in the same way, it’s important you check your theme header.php for the viewport metatag. In most older and nonresponsive themes it should look something like:

You should change it to;

responsive navigation


This viewport tag is important for instructing the web browsers on the way they should control dimensions and scaling of a web page.


Step 3: Registering Responsive Navigation

Now we should begin working on the new function.php file, the first task is to register the new responsive menu as follows;



I created this function to register the new responsive navigation and named it ‘Tutorial Responsive Navigation’, here I used the register_nav_menu WordPress function. I went ahead to hook into WordPress action hook after_setup_theme then called the function name twentysixteen_child_responsive_menu

The results of registration of this function are availability of newly created menu in the WordPress dashboard Appearances > Menus > Manage Locations. See the screenshot below:


Responsive Navigation


It’s time now to create our responsive navigation, go to WordPress dashboard and under Appearances > Menus create a new menu and add the menu items as shown below;

Responsive Navigation


After adding this menu we should now go ahead and display it on our child theme.


Step 4: Adding Navigation Location in header.php (display menu on theme)

We now open the header.php file and locate the wp_nav_menu then below it we should now call the responsive menu using the code below;

This simply adds the menu to our header and also generates the HTML class for our menu which we will use for styling purposes. In this case our HTML class is .responsive-navigation. After adding this code the menu should now be visible on our theme.

Responsive Navigation

Step 5: Styling Responsive Menu

It is important we note that this new responsive navigation should only be visible for people using the mobile gadgets. We should there disable view on the desktops, to implement this we add the following CSS line:

This alone will not work since it will disable the view of this menu across all the gadgets. It is at this point that media queries mentioned earlier in this tutorial become very useful. We therefore target the screen size of 480px as the point in which we wish to display this menu;

When you have added this CSS styles you will notice that the responsive menu above disappears when you are viewing from the desktop. You can mimic the mobile browser view by scaling your desktop browser view , on Windows press CTRL+ on Mac CMD +. You will also see that both menus are displayed;

Responsive Navigation

We now need to ensure the desktop menu is not displayed on mobile. We simply add this CSS rule inside the media query;

Here is the complete code with some additional styling to make the menu look good;

Here is the final result of this styling;

Responsive Navigation

Finally, we have successfully created a responsive WordPress navigation on our child theme that is working perfectly. It is important to note that this can be done on any other theme by following the steps outlined in this tutorial. Please let me know if you have any questions, complements or additional remarks using the comment section below, your feedback is highly welcomed.