responsive-navigation-menu-large

How to create a responsive navigation menu in WordPress

Moses Ngari's Layout avatar

The road to creating a responsive navigation menu in WordPress is open ended. There are countless ways to do this thanks to the flexibility offered by WordPress.

Today, I’ll show you how to create a lean and mean responsive navigation menu. Lean because we are going to achieve all this in under 8 kilobytes, and mean because it will be an incredibly efficient navigation menu. We are simply going to mirror your current navigation menu so that you don’t have to maintain two different ones. By killing two birds with one stone, we’ll create one menu to rule them all.

responsive-navigation-in-wp

Before we start, we suggest you have some basic front-end development knowledge. (We only require familiarity and not proficiency, so please don’t panic.) Basic HTML, CSS, jQuery, and WordPress knowledge would be ideal. This is a beginner to intermediate tutorial, as it involves modification of WordPress theme files.

You will also need access to the following WordPress theme files:

  • functions.php
  • header.php
  • footer.php
  • Style.css

Before making any modifications, please be sure to run a backup of your site, or test changes in a local environment first. You always want to have a way to revert to your original files.

Our free local development app, Local by Flywheel, will help you simplify your workflow and safely experiment with your site. Try it today!

responsive-navigation-menu-desktop

We are going to use bigSlide.js, a tiny jQuery plugin for creating off-screen slide panels. On the plugin’s website, it is described as “a teeny tiny (~1kb compressed) jQuery plugin for creating off-screen slide panel navigation.” This is in line with our lean and mean responsive navigation goal.

Let’s get down to work.

1. Download the latest compressed version of bigSlide.js. Copy over the file into your theme’s /js folder.

2. Open functions.php in your preferred code editor. Search for  wp_enqueue_script. You will likely see multiple instances, as wp_enqueue_script is the standard way of adding scripts to WordPress.

3. Just after the last instance of wp_enqueue_script, add the following snippet and save.

wp_enqueue_script( 'my-responive-menu', get_template_directory_uri() . '/js/bigSlide.min.js', array(), '20161214', true );

4. Open header.php, and add the class push to the first div just after the body tag. This section typically looks like this:

<body <?php body_class(); ?>><div id="page" class="hfeed site">.

So after adding you should end up with:

<div id="page" class="hfeed site push">.

5. While still inside header.php search for site-navigation. This will either be a class or an id depending on your theme. In most WordPress themes, it should look something like this:

<nav id="primary-navigation" class="site-navigation primary-navigation" role="navigation">
                <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu', 'menu_id' => 'primary-menu' ) ); ?>
            </nav>

6. Add the following snippet just before </nav>. You should end up with this:

<nav id="primary-navigation" class="site-navigation primary-navigation" role="navigation">
                <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu', 'menu_id' => 'primary-menu' ) ); ?>
<a href="#responsive-menu" class="menu-link">&#9776;</a>
            </nav>

Here we are creating a hamburger icon that will be used to trigger the mobile menu.

responsive-navigation-menu-hamburger

7. Open footer.php and search for <?php wp_footer(); ?>. Just after this line, add the following snippet:

<div id="responsive-menu" class="panel mobile-menu"><?php wp_nav_menu( array('theme_location' => 'primary',) );?></div>
<script> jQuery('.menu-link').bigSlide({
       menu: '.mobile-menu',
       speed: 300,
       side:"right",
      easyClose:true});</script>

Basically, we are creating a hidden duplicate navigation menu on the footer.

8. Finally, open up style.css and just after the last line, add the following code snippet:

.panel{ position: fixed; right: -15.625em; width: 15.625em; background:#222;}
.push{position:relative;}
.menu-link{display:none;color:#fff;background:#333;border-radius:4px;padding:2px 12px;float:right;}
.mobile-menu a{display:block;color:#fff;padding:10px 15px;}
.mobile-menu a:hover{background-color:#555;}
.mobile-menu li{border-bottom:1px #444 solid;}
@media only screen and (max-width:900px) {
  
#primary-menu{display:none;}
.mobile-menu #primary-menu{display:block;}
.menu-link{display:inline-block;}
}

I have used a dark color scheme here, but feel free to change the colors to suit your needs.

This approach will work on almost all standard WordPress themes. But, due to the different use cases and header layouts out there, you may have to make a few adjustments.

Ultimately, the fundamentals remain the same. The rationale is that on a screen size of 900px or lower, you’ll hide the default main navigation and show the hamburger icon instead.

On clicking or tapping the hamburger icon, the menu we duplicated on the footer opens up as an app like side panel.

responsive-navigation-menu-mobile-slide

If you happen to get stuck, please leave a comment below. I will be more than happy to help. Happy coding!

Comments ( 8 )

  1. Puneet

    April 20, 2017

    I did as your blog says, but i keep getting an error jquery() error bigSlide is not a function.

    • David T

      May 18, 2017

      I got the same error

      • Moses

        May 23, 2017

        Hi David T, I would like to help. Mind sharing the live link so that I can take a look?

    • Moses

      May 23, 2017

      Hi Puneet, I would like to help. Mind sharing the live link so that I can take a look?

  2. Alexandre

    July 18, 2017

    Hello, I have the same problem, the website : https://energies-renouvelables.grassavoye.fr/

  3. Kirsty

    July 31, 2017

    This does not work at all, the positioning of the menu in WP is completely off :S Can you advise.

    Thanks

  4. Molly

    September 7, 2017

    To anyone who may have had a similar issue - I wasn't able to see the menu in the slide until I changed this in the footer:

    menu: '#mobile-menu',

    to this:

    menu: '.mobile-menu',

    That worked like a charm for me.

  5. Aezra Tinx

    October 22, 2017

    I follow your tutorial. But I faced a javascript error: "jQuery is not defined" could you help me?

    I’m using Shopify for my site and I'm moving to WordPress. But it is very hard to create a complex menu like my experience on Shopify.
    Do you know any Wordpress menu plugin that allows me to create a mega menu like the Shopify app: https://apps.shopify.com/globo-mega-menu

  6. Jamie Hall

    November 28, 2017

    For all Jquery issues it can be resolved by adding this to your header.

  7. Nuno

    February 18, 2018

    Simple and well written tutorial just a small thing - I wonder how do you handle 2 submenu level :)

  8. Gaz

    April 30, 2018

    Useful tutorial, sub menu help would be good!

Join the discussion