Beginner's Guide for WordPress - Start your WordPress Blog in minutes.
Choosing the Best
WordPress Hosting
How to Easily
Install WordPress
WordPress Plugins
View all Guides

How to Add a Slide Panel Menu in WordPress Themes

Last updated on by
Special WordPress Hosting offer for WPBeginner Readers
How to Add a Slide Panel Menu in WordPress Themes

Recently one of our users asked us how they can replace their navigation menu with a jQuery slide panel menu? Slide panel menu can be used to greatly improve the user experience on mobile sites. In this article we will show you how to add a slide panel menu in WordPress themes.

Slide Panel Menu in WordPress Default Theme

Note: This is an intermediate level tutorial and requires sufficient HTML and CSS knowledge.

Replacing Default Menu With a Slide Panel Menu in WordPress

The goal here is to show a slide panel menu to users on smaller screens while keeping our theme’s default menu so that the users on laptops and desktops can see the full menu. Before we get started, it is important to know that there are many different WordPress themes, and you will have to deal with a little CSS later on.

First thing you need to do is open a plain text editor on your computer, like Notepad, and create a new file. Copy and paste this code:

(function($) {
    function() {
        $('#popout').animate({ left: 0 }, 'slow', function() {
            $('#toggle').html('<img src="" alt="close" />');
    function() {
        $('#popout').animate({ left: -250 }, 'slow', function() {
            $('#toggle').html('<img src="" alt="close" />');

Replace with your own domain name, and also replace your-theme with your actual theme directory. Save this file as slidepanel.js on your desktop. This code uses jQuery to toggle a slide panel menu. It also animates the toggle effect.

Open an FTP client like Filezilla and connect to your website. Next, go to your theme directory and if it has a js folder then open it. If your theme directory does not have a js folder, then you need to create one and upload slidepanel.js file into the js folder.

The next step is designing or finding a menu icon. Most commonly used menu icon is the one with three lines. You can create one using Photoshop or find one of the many existing images from google. For this tutorial we are using a 27x23px menu icon. Once you have created or found your menu icon, rename it to menu.png and upload it to the images folder in your theme directory.

The next step is to enqueue javascript file for slide panel in WordPress. Basically just copy and paste this code in your theme’s functions.php file.

wp_enqueue_script( 'wpb_slidepanel', get_template_directory_uri() . '/js/slidepanel.js', array('jquery'), '20131010', true );

Now that everything is setup, you need to modify your theme’s default menu. Usually, most themes display navigation menus in theme’s header.php file. Open header.php file and find the line similar to this one:

<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>

The goal here is to wrap your theme’s navigation menu with the HTML code to display your slide panel menu on smaller screens. We are going to wrap it in a <div id="toggle"> and <div id="popout">. Like this:

<div id="toggle"><img src="" alt="Show" /></div>
<div id="popout">
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>

Replace with your own domain name and your-theme with your theme directory. Save your changes.

The last step is to use CSS to hide the menu icon for users with larger screens and display it to users with smaller screens. We also need to adjust the position of the menu icon and the appearance of the slide panel. Copy and paste this CSS to your theme’s stylesheet.

@media screen and (min-width: 769px) { 
#toggle {


@media screen and (max-width: 768px) { 
#popout {
position: fixed;
height: 100%;
width: 250px;
background: rgb(25, 25, 25);
background: rgba(25, 25, 25, .9);
color: white;
top: 0px;
left: -250px;

#toggle {
float: right;
position: fixed;
top: 60px;
right: 45px;
width: 28px;
height: 24px;


.nav-menu li { 
border-bottom:1px solid #eee; 

.nav-menu li:hover { 

.nav-menu li a { 

Remember that your theme’s navigation menu could be using different CSS classes, and they may conflict with this CSS style. However, you can troubleshoot these issues by using the Chrome Inspector tool to find out which css classes are conflicting within your stylesheet. Play around with the CSS to match your style and needs.

We hope this tutorial helped you add a slide panel menu in WordPress using jQuery. For feedback and questions please leave a comment below and don’t forget to follow us on Google+

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi. Page maintained by Syed Balkhi.

WPBeginner's Video Icon
Our HD-Quality tutorial videos for WordPress Beginners will teach you how to use WordPress to create and manage your own website in about an hour. Get started now »


  1. Ru says:

    Do you have demo for this?
    I want to check it before

  2. Daniel Jarosz says:

    clean & simple, thank You for this tutt!

  3. Ann says:

    Hi, this code works perfectly when I run my website locally but not once it’s live. Is there any possible explanation to this? I updated the image links not sure what else needs to be updated as the folders have not changed.

  4. Madiha says:

    its not working on my site plz visit and tell the solution

  5. Mattia says:

    Hi, interesting article… Do you have a DEMO of this, or a URL to an online site in which you implemented it? It would be interesting to see it in a real case, before trying to use it! Many thanks

  6. Jim says:

    Is it possible to show how the script could be modified so the close event can be triggered by clicking anywhere else but on the navigation?

    In other words, so the user doesn’t need to just click on the toggle menu icon to close the navigation sidebar?


  7. Karl says:

    I am searching high and low for a plugin or the ability to implement the type of menu you have currently running at the top of your page. You have a “Play” button on the right side of your header. Upon pressing it a content area slides out from your header section. I really want to use this type of menu in my site. If you could point me even to a link where this type of menu is explained I’ll take it from there and thanks. This is an awesome tutorial!

    • WPBeginner Support says:

      Karl you can right click on the play button and select inspect element and study our source code. We will also try to cover it soon at WPBeginner as a tutorial.

      • Shubham Dubey says:

        Sorry for replying here,(Comments is not available)

        Hey! I’m using Genesis framework, with its child theme, i’m unable to find header.php file there,

        i just copied the header.php file from genesis to my child themes folder, but after opening header.php file didn’t found any lines :(


  8. Jim says:

    Excellent guide. I’m almost there with a test implementation, however I’m wondering…can I use a relative path in the sidepanel.js file instead of the absolute path?

    I’ve tried to do so but I cannot figure it out. Should the relative path be relative to the html file calling the javascript?


  9. krish says:

    It’s good and useful content. The screenshot and coding easily understand and apply to my website. Good job man!!!

  10. Håkon Stillingen says:

    Interesting article. How would I go about replacing default header in Genesis Framework?

Add a Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.