Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

How to Add a Slide Panel Menu in WordPress Themes

Adding a slide panel menu to your WordPress site can improve navigation, especially on mobile devices. This feature provides a smooth, beautiful animation when users tap the menu icon.

A responsive menu makes it easier for visitors to explore your website on their phones or tablets. It ensures a seamless browsing experience, keeping your audience engaged.

In this article, we’ll guide you through adding a slide panel menu to your WordPress theme. Best of all, you can do this without writing any code.

How to Add a Slide Panel Menu in WordPress Themes

Why Add a Slide Panel Menu in WordPress Themes?

Well-designed menus help your visitors find their way around your WordPress website. Many of your visitors will be using mobile devices, so it’s important to preview the mobile version of your WordPress site to see how your navigation menu looks on smaller screens.

Luckily, many WordPress themes come with built-in styles that automatically show mobile-friendly menus when viewed on a small screen.

However, you may want to customize your mobile navigation even more and add a fullscreen responsive menu or animated slide panel menu.

With that in mind, let’s take a look at how to add a slide panel menu in WordPress themes.

How to Add a Slide Panel Menu in WordPress Themes

The first thing you need to do is install and activate the Responsive Menu plugin. If you need any, then you can see our step-by-step guide on how to install a WordPress plugin.

There is a premium version of the Responsive Menu plugin with extra themes and additional features such as conditional logic. But for this tutorial, we’ll use the free plugin.

Upon activation, let’s navigate to Responsive Menu » Menus from your WordPress dashboard. Once there, you should click the ‘Create New Menu’ button at the top of the screen.

Create a New Responsive Menu

You will then see 4 themes you can use for your new responsive menu. Additional themes are available for purchase.

For this tutorial, we’ll use the automatically selected theme. You can then click the ‘Next’ button.

Select a Theme for Your Responsive Menu

This will take you to the ‘Menu Settings’ page.

Here, you can enter a name for your responsive menu and then select which WordPress menu you’d like to be displayed in the panel. For example, we chose the ‘Navigation’ menu.

If you need to create a new menu, then you can learn how by following our guide on how to add a navigation menu in WordPress.

Give the Menu a Name and Link It With the WordPress Menu You Wish to Use

You can also hide the normal menu that comes with your WordPress theme so that your users will only see the new slide panel menu. You do this by entering CSS code into the ‘Hide Theme Menu’ field.

The code you need to enter here varies from theme to theme, and you can learn more details by clicking the ‘Know More’ link.

Note: Users with the Pro version have a few additional settings. For example, Pro users can select the devices and pages where the menu should be shown.

Once you’re happy with the settings, you should click the ‘Create Menu’ button at the bottom of the page. This will take you to a page where you can finish customizing your menu.

You will see a preview of your website on the right of the screen, and there are buttons at the bottom to switch between phone, tablet, and desktop views. You’ll also find customization options on the left.

You Can Now Customize Your Responsive Menu

You might notice that some text is displayed above the menu. This is the menu’s title and a line of text that the plugin calls ‘additional content’.

You can edit or hide the text by clicking on ‘Mobile Menu’ and then ‘Container’ in the menu on the left of the page.

Customize or Hide the Text Shown at the Top of Your Menu

Additionally, you can type anything you like into the ‘Title Text’ field, such as ‘Main Menu’ or ‘Navigation.’ If you don’t want to display a title, then simply slide the ‘Title’ switch to the off position.

After that, you’ll want to scroll down to the ‘Additional Content’ setting.

From here, you can toggle this setting off or type alternate content. In the screenshot below, you’ll notice that the switch has been toggled off, so the words ‘Add more content here…’ are now hidden.

Customize or Hide the Additional Content for Your Menu

Once you’re happy with the menu settings, let’s make sure you click the ‘Update’ button at the bottom of the page to store your settings.

The Responsive Menu plugin offers many other options for changing the behavior and appearance of your slide panel menu. You can explore these options on the plugin’s settings page and adjust them as needed.

Now, you can visit your website to see the menu in action. Here’s how it looks on our demo website. Note that if the current page is in the menu, it is highlighted with a color band.

Animation of a Slide Panel Menu in WordPress

Expert Tip: Styling your WordPress navigation menu can enhance your site’s appearance and usability. A well-designed menu helps visitors easily find what they need and encourages clicks. For more on this topic, check out our guide on different ways to style your WordPress navigation menu.

We hope this tutorial helped you learn how to add a slide panel menu in WordPress themes. Next, you may also want to learn how to create a dropdown menu and how to show different menus to logged-in users in WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us. Here's our editorial process.

Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit - a collection of WordPress related products and resources that every professional should have!

Reader Interactions

17 CommentsLeave a Reply

  1. Syed Balkhi

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Moinuddin Waheed

    This is a saviour for me as I have been struggling to get slide out panel for mobile responsive menu.
    Earlier I used code snippets and inserted in wp code for this.
    But this plugin offers more customisation and the pro version seems more powerful in terms of customisation control.
    I will definitely try this plugin.

  3. Mohammad Kashif

    Awesome!
    Can i add close button in the popout?

  4. Luke Marshall

    I’m still waiting on a support ticket reply from you guys regarding this exact need! the one you offer is on the right side only with no apparent way to change it to the left, I’m glad I’ve found this.

    • Cynthia

      Change the function “left” to “right” in the two spots it is used in the function code.

  5. Ru

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

  6. Ann

    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.

  7. Mattia

    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

  8. Jim

    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?

    Thanks.

  9. Karl

    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

      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.

      Admin

      • Shubham Dubey

        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 :(

        hOW TO DO THIS WITH CHILD THEMES, PLEASE EXPLAIN.

  10. Jim

    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?

    Thanks

  11. krish

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

  12. Håkon Stillingen

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

Leave A Reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.