Would you like to add a slide panel menu to your WordPress site?
Adding a responsive menu will make it easier for users to navigate your website when using mobile devices. When they tap your menu icon, a panel menu will slide onto the screen using a beautiful animation.
In this article, we’ll show you how to add a slide panel menu in WordPress themes without writing any code.
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 will 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.
There is a premium version of Responsive Menu with extra themes and additional features such as conditional logic, but for this tutorial, we’ll use the free plugin.
Upon activation, navigate to the Responsive Menu » Menus page. Once there, you should click the ‘Create New Menu’ button at the top of the screen.
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 automatically selected theme. You can then click the ‘Next’ button.
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 the sake of this tutorial, 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.
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.
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 view. You’ll also find customization options on the left.
Notice that there is some text displayed above the menu. This is the menu’s title text 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.
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 need to scroll down to the ‘Additional Content’ setting. 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.
Once you’re happy with the menu settings, make sure you click the ‘Update’ button at the bottom of the page to store your settings.
The Responsive Menu plugin comes with many other options that allow you to change 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, then it is highlighted with a color band.
Do you want to add custom navigation menus in your WordPress theme?
All themes have set locations where you can display a navigation menu. However, by default, you can’t add a menu anywhere else except these pre-defined locations.
In this article, we’ll show you how to add a custom navigation menu to any area of your WordPress theme.
Why Add Custom Navigation Menus in WordPress Themes?
The exact location of your menu will vary based on your WordPress theme. Most themes have several options, so you can create different menus and show them in different places.
To see where you can display menus in your current WordPress theme, simply head over to Appearance » Menus and then take a look at the ‘Display location’ section.
The following image shows the locations that are supported by the Astra WordPress Theme.
However, sometimes you may want to show a menu in an area that isn’t listed as a ‘Display location’ in your theme.
With that in mind, let’s take a look at how to create WordPress navigation menus and then add them to your theme. Simply use the quick links below to jump to the method you prefer.
Method 1. Adding a Custom Navigation Menu in Full Site Editing
If you’re using a block theme, then you can add a custom navigation menu using Full Site Editing (FSE) and the block editor. For more details, you can see our article on the best WordPress full-site editing themes.
This method doesn’t work with every theme, and it doesn’t let you customize every part of the menu. If you want to add a completely custom menu to any WordPress theme, then we recommend using a page builder plugin.
If you are using a block-based theme, then head over to Appearance » Editor.
This will launch the full site editor with one of your active theme’s templates already selected.
If you want to add a custom navigation menu to a different template, then click on the arrow in the toolbar and select ‘Browse all templates.’
The site editor will now show all the different templates that are part of your theme.
Simply find the template that you want to edit, and give it a click.
The next step is adding a Navigation block to the area where you want to show your menu.
In the top-left corner, click on the blue ‘+’ button.
Now, go ahead and type ‘Navigation’ into the search bar.
When the ‘Navigation’ block appears, simply drag and drop it onto your layout.
Next, click to select the Navigation block.
If you’ve already created the menu that you want to display, then click ‘Select Menu’ and make your selection from the dropdown.
Another option is to click on ‘Create new menu,’ which allows you to build a navigation menu inside the full site editor.
To start with a blank menu, simply click on ‘Start empty.’
To add items to the new menu, just click on the ‘+’ icon.
This opens a popup where you add any post or page, and decide whether these links should open in a new tab.
Simply repeat these steps to add more items to the menu.
When you’re happy with how the menu looks, simply click on the ‘Save’ button. Your site will now be using the new template, and visitors can interact with your custom navigation menu.
Method 2. Creating a Custom Navigation Menu in WordPress Using SeedProd (Works With All Themes)
The full site editor is a quick and easy way to add a basic custom menu to block-based themes. However, if you want to add an advanced, fully-customizable menu to any theme, then you’ll need a page builder plugin.
SeedProd comes with over 180 professionally-designed templates that you can use as your starting point. After choosing a template, you can add a custom navigation menu to your site using simple drag and drop.
First, you need to install and activate the SeedProd plugin. For more details, see our step-by-step guide on how to install a WordPress plugin.
Note: There’s also a free version of SeedProd that allows you to create custom navigation menus without writing code. However, in this guide, we’ll be using SeedProd Pro since it has lots more templates for you to choose from.
After activating the plugin, SeedProd will ask for your license key.
Once you’ve done that, go to SeedProd » Landing Pages and click on the ‘Add New Landing Page’ button.
You can now choose a template for your custom page.
To help you find the right design, all of SeedProd’s templates are organized into different campaign types such as coming soon and lead squeeze campaigns. You can even use SeedProd’s templates to improve your 404 page.
To take a closer look at any design, simply hover your mouse over that template and then click on the magnifying glass icon.
When you find a design that you want to use, click on ‘Choose This Template.’
We’re using the ‘Black Friday Sales Page’ template in all our images, but you can use any template you want.
After choosing a template, type in a name for that custom page. SeedProd will automatically create a URL based on the page’s title, but you can change this URL to anything you want.
After entering this information, click on the ‘Save and Start Editing the Page’ button.
Most templates already contain some blocks, which are the core components of all SeedProd page layouts.
To customize a block, just click to select it in the page editor.
The left-hand toolbar will then show all the settings for that block. For example, in the image below, we’re changing the text inside a ‘Headline’ block.
You can format the text, change its alignment, add links, and more using the settings in the left-hand menu.
To add new blocks to your design, simply find any block in the left-hand menu and then drag it onto your design. If you want to delete a block, then simply click to select that block and then click on the trash can icon.
Since we want to create a custom navigation menu, drag a ‘Nav Menu’ block onto the page.
This creates a navigation menu with a single default ‘About’ item.
To customize this menu item, click to select it in the left-hand menu.
This opens some controls where you can change the text, as well as add the URL for the menu item to link to.
By default, the menu item will be a ‘dofollow’ link and open in the same browser window. To change either of these settings, simply use the checkboxes in the ‘URL Link’ section.
In the following image, we’re creating a “nofollow” link that will open in a new window.
To add more items to the menu, simply click on the ‘Add New Item’ button.
You can then customize each of these items by following the same process described above.
The left-hand menu also has settings that change the font size and text alignment.
You can even create a divider, which will appear between each item in the menu.
After that, go ahead and switch to the ‘Advanced’ tab. Here, you can change the menu’s colors, spacing, typography, and other advanced options.
As you make changes, the live preview will update automatically so you can try different settings to see what looks good in your design.
When you’re happy with how the custom menu looks, it’s time to publish it.
Simply click the dropdown arrow next to ‘Save’ and then select ‘Publish.’
Your custom navigation menu and the page will now go live on your WordPress blog.
Method 3. Creating a Custom Navigation Menu in WordPress Using Code (Advanced)
If you don’t want to set up a page builder plugin, then you can add a custom navigation menu using code. Normally, you would need to add custom code snippets to your theme’s functions.php file.
However, we don’t recommend this method for anyone but advanced users, and even then, a small mistake in your code could cause a number of common WordPress errors, or break your site completely.
That’s why we recommend using WPCode. It is the easiest and safest way to add custom code in WordPress without having to edit any core WordPress files.
This will add a new menu location to your theme, called ‘My Custom Menu.’ To use a different name, simply change the above code snippet.
If you want to add more than one new navigation menu to your theme, then simply add an extra line to your code snippet. For example, here we’re adding two new menu locations to our theme, called My Custom Menu and Extra Menu:
Below the code box, you will see insertion options. If it isn’t already selected, then choose the ‘Auto Insert’ method so the snippet will be automatically inserted and executed on your site.
After that, open the ‘Location’ dropdown and click on ‘Run Everywhere.’
Then, you’re ready to scroll to the top of the screen and click on the ‘Inactive’ toggle so it changes to ‘Active.’
Finally, go ahead and click on ‘Save’ to make this snippet live.
After that, go to Appearance » Menus and look at the ‘Display location’ area.
When you’re happy with your menu, the next step is adding it to your WordPress theme.
Adding the custom navigation menu to your WordPress theme
Most website owners show their navigation menu directly under the header section just after the site logo or title. This means the navigation menu is the first thing visitors see.
However, you can display your custom navigation menu anywhere you want by adding some code to the theme’s template file.
In your WordPress dashboard, go to Appearance » Theme File Editor.
In the right-hand menu, select the template that you want to edit. For example, if you want to show the custom navigation menu in your website’s header, then you’ll typically want to select the header.php file.
After selecting the template file, you need to add a wp_nav_menu function and specify the name of your custom menu. For example, in the following code snippet we’re adding My Custom Menu to the theme’s header:
However, if you run an online store or a large website, then you may want to add more links to the navigation menu.
Dropdown menus help you solve the limited space issue by showing menu links only when users bring their mouse over to a parent item. They also allow you to organize the menu structure by topics or hierarchy.
Lastly, they look pretty nice too.
That being said, now let’s take a look at how you can easily create WordPress dropdown menus add them to your website.
Step 1. Choosing a Theme with Dropdown Menu Support
WordPress comes with a built-in menu management system but displaying those menus is entirely dependent on your WordPress theme.
Almost all WordPress themes support dropdown menus by default. However, some themes may not have proper menu support.
You need to make sure that you are using a WordPress theme that supports dropdown menus.
How do you know if the theme you are using supports the dropdown menu?
You can simply visit the theme’s website where you’ll find a link to the theme’s demo. From there you can see if the demo is showing a dropdown menu in the navigation menu.
If it is not, then you’ll need to find a WordPress theme that does.
Here are a few excellent themes that support the dropdown menu out of the box.
Astra – It is a multipurpose WordPress theme that comes with several starter sites and tons of features.
StudioPress themes – Built on top of genesis theme framework, these professional themes are highly optimized for performance.
OceanWP – A popular WordPress theme that is suitable for all kind of websites.
Ultra – Powered by Themify builder this drag and drop WordPress theme comes with beautiful templates and flexible theme options.
Divi – popular theme by Elegant Themes that uses the Divi page builder and comes with tons of drag & drop features including dropdown menus.
That being said, now let’s take a look at how to create a dropdown WordPress menu.
Step 1. Creating a Navigation Menu in WordPress
If you have already set up a navigation menu on your website, then you can skip to the next step.
Let’s create a simple menu first.
Go to Appearance » Menus page and click on the ‘Create a new menu’ link at the top.
Next, you need to provide a name for your navigation menu. This name will not be publicly visible on your website. The purpose of menu name is to help you identify the menu inside the WordPress admin area.
Enter a name for your menu and then click on the ‘Create Menu’ button.
WordPress will now create a new empty menu for you.
Let’s add the top links to the navigation menu. These items will appear in the top row of your menu.
Simply select the pages you want to add from the left column and click on the ‘Add to menu’ button. You can also select blog posts, categories, or add custom links.
You will now see those pages appear in the right column under your new menu.
Step 2. Adding Sub-Items to a Menu
Sub-items are the items that will appear inside the dropdown menu. Depending on how you want to organize your menus, you can add them under any of the existing items.
For the sake of this tutorial, we will be adding categories under the blog link.
Simply select the items you want to add from the left column and then click on the ‘Add to menu’ button. Your items will now appear in the right column.
However, these links will appear as regular items. We need to make them a sub-item of a parent menu.
You can simply drag and drop a menu item and place it under the parent item. Move it slightly to the right, and it will become a sub-item.
Repeat the process for all links you want to show under the dropdown menu.
Once you are done, don’t forget to click on the ‘Save menu’ button to store your changes.
Step 3. Publish Your Dropdown Menu
If you are editing a menu that’s already live on your website, then it will start appearing on your website right away.
However, if it is a new menu item, then you now need to choose a theme location to display this menu.
WordPress themes can show menus at different locations. Each theme defines their own menu locations, and you can select which menu you want to display there.
You’ll find this option in the right column under ‘Menu settings’. Select an option next to the ‘Display location’ setting and click on the ‘Save menu’ button.
You can now visit your website to see your dropdown menu in action.
Tips on Creating Interactive Dropdown Menus
Navigation menus are important because this is the first place your users will look if they want to see specific information.
Using them correctly will help your users find their way around your website. It will also help you get more pageviews, conversions, and sales on your website.
Here are a few tips on making your navigation menus more interactive with dropdown menus.
1. You can create multi-level dropdown menus
Making a link a sub-item of another link makes it appear in the dropdown menu. You can also add a sub-item below another sub-item to create multi-level dropdown menus.
Your theme would automatically show them as a sub-menu inside the dropdown.
2. You can also create multiple dropdown menus
You can create a dropdown under any top link in your menu. You can even add multiple dropdown menus in your main navigation menu.
3. Create menus with a live preview
If your menu gets too complicated, then you can switch to the visual preview. Go to Appearance » Customize to launch the live theme customizer.
From there, click on the ‘Menus’ tab and then select your navigation menu. You’ll now see a drag and drop menu editor in the left column with a live preview of your site in the right panel.
4. Creating a large mega menu as dropdown in WordPress
The dropdown menus only show one dropdown at a time. What if you wanted to show the full structure of your website as a mega menu that only appears when users hover on the main menu?
Mega menus do appear as a dropdown menu, but they can show a lot more links, sub-menus, and more. For detailed instructions, see our step by step tutorial on how to create a mega menu in WordPress.