How to Add a Slideboard Menu to WordPress Themes


Do you want to add a slide menu to your WordPress site?

Adding a responsive menu will make it easier for users to navigate your site when using mobile devices. When they touch your menu icon, the panel menu will slide onto the screen with a beautiful animation.

In this article, we’ll show you how to add a slide deck menu to WordPress themes without writing any code.

Why Add a Slideboard Menu to WordPress Themes?

Well-designed menus help visitors find their way to you more easily 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.

Fortunately, many WordPress themes have built-in styles that automatically display mobile-friendly menus when viewed on a small screen.

However, you may want to further customize and add to your mobile navigation full screen responsive menu or an animated sliding panel menu.

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

How to Add a Slideboard Menu to WordPress Themes

The first thing you need to do is to install and activate it Responsive menu to include. Check out our step-by-step guide for more details how to install a WordPress plugin.

There is a premium version Responsive menu with additional themes and additional features such as conditional logichowever, we will be using a free plugin for this tutorial.

After activation, navigate to Responsive menu » Menus pages. Once there, click the “Create New Menu” button at the top of the screen.

Create a new responsive menu

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

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

Choose 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 choose which WordPress menu you want to display on the panel.

For the purpose of this tutorial, we have chosen the ‘Navigation’ menu. If you need to create a new menu, you can learn how by following our guide at how to add a navigation menu in WordPress.

Name the menu and associate it with the WordPress menu you want 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 menu. To do this, enter the CSS code in the “Hide Theme Menu” box.

The code you need to enter here varies from theme to theme, and you can find out more details by clicking on the “More” link.

Users with the Pro version have some additional settings. For example, Pro users can choose the devices and pages where the menu should be displayed.

Once you’re happy with your settings, 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.

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

Now you can customize your responsive menu

Notice that some text is displayed above the menu. This is the menu title text and a line of text that the plugin calls “additional content”.

You can edit or hide the text by clicking “Mobile Menu” and then “Container” in the menu on the left.

Customize or hide the text displayed at the top of your menu

You can enter anything you want in the “Title Text” field, such as “Main Menu” or “Navigation”. If you don’t want to display the title, simply slide the ‘Title’ switch to the off position.

After that, you need to scroll down to the “Additional content” setting. You can turn this setting off or enter alternative content. In the screenshot below, you’ll notice that the toggle has been turned off, so the words “Add more content here…” are now hidden.

Customize or hide additional content for your menu

When you’re happy with your menu settings, don’t forget to click the “Update” button at the bottom of the page to save your settings.

The Responsive Menu plugin has many other options that allow you to change the behavior and appearance of the slide menu. You can explore these options on the plugin settings page and adjust them as needed.

You can now visit your website to see the menu in action. This is what it looks like on our demo website. Note that if the current page is in the menu, it is indicated by a colored band.

Slideboard Menu Animation in WordPress

We hope this tutorial helped you learn how to add a slide deck menu to WordPress themes. You might also want to learn how to track visitors to your wordpress websiteor see our list must-have plugins to grow your site.

If you liked this article, please subscribe to ours YouTube channel for WordPress video tutorials. You can also find us at Twitter and Facebook.



Leave a Comment

error: Content is protected !!