Would you want so as to add a slide panel menu to your WordPress web site?
Including a responsive menu will make it simpler for customers to navigate your web site when utilizing cellular units. Once they faucet your menu icon, a panel menu will slide onto the display utilizing a ravishing animation.
On this article, we’ll present you add a slide panel menu in WordPress themes with out writing any code.
Why Add a Slide Panel Menu in WordPress Themes?
Effectively-designed menus assist your guests discover their manner round your WordPress web site. Lots of your guests will likely be utilizing cellular units, so it’s essential to preview the cellular model of your WordPress web site to see how your navigation menu seems to be on smaller screens.
Fortunately, many WordPress themes include built-in kinds that can routinely present mobile-friendly menus when seen on a small display.
Nevertheless, you might wish to customise your cellular navigation much more and add a fullscreen responsive menu or animated slide panel menu.
With that in thoughts, let’s check out add a slide panel menu in WordPress themes.
Tips on how to Add a Slide Panel Menu in WordPress Themes
The very first thing you could do is set up and activate the Responsive Menu plugin. For extra particulars, see our step-by-step information on set up a WordPress plugin.
There’s a premium model of Responsive Menu with additional themes and extra options resembling conditional logic, however for this tutorial, we’ll use the free plugin.
Upon activation, navigate to the Responsive Menu » Menus web page. As soon as there, you must click on the ‘Create New Menu’ button on the high of the display.
You’ll then see 4 themes that you need to use in your new responsive menu. Extra themes can be found for buy.
For this tutorial, we’ll use the routinely chosen theme. You possibly can then click on the ‘Subsequent’ button.
This can take you to the Menu Settings web page. Right here you possibly can enter a reputation in your responsive menu, after which choose which WordPress menu you’d prefer to be displayed within the panel.
For the sake of this tutorial, we selected the ‘Navigation’ menu. If you could create a brand new menu, then you possibly can find out how by following our information on add a navigation menu in WordPress.
It’s also possible to disguise the conventional menu that comes along with your WordPress theme in order that your customers will solely see the brand new slide panel menu. You do that by coming into CSS code into the ‘Conceal Theme Menu’ subject.
The code you could enter right here varies from theme to theme, and you may study extra particulars by clicking the ‘Know Extra’ hyperlink.
Customers with the Professional model have a couple of extra settings. For instance, Professional customers can choose the units and pages the place the menu needs to be proven.
When you’re pleased with the settings, you must click on the ‘Create Menu’ button on the backside of the web page. This can take you to a web page the place you possibly can end customizing your menu.
You will note a preview of your web site on the proper of the display, and there are buttons on the backside to modify between telephone, pill, and desktop view. You’ll additionally discover customization choices on the left.
Discover that there’s some textual content displayed above the menu. That is the menu’s title textual content and a line of textual content that the plugin calls ‘extra content material’.
You possibly can edit or disguise the textual content by clicking on ‘Cellular Menu’ after which ‘Container’ within the menu on the left of the web page.
You possibly can kind something you want into the ‘Title Textual content’ subject, resembling ‘Principal Menu’ or ‘Navigation.’ In the event you don’t wish to show a title, then merely slide the ‘Title’ change to the off place.
After that, you could scroll all the way down to the ‘Extra Content material’ setting. You possibly can toggle this setting off or kind alternate content material. Within the screenshot beneath, you’ll discover that the change has been toggled off so the phrases ‘Add extra content material right here…’ at the moment are hidden.
When you’re pleased with the menu settings, be sure you click on the ‘Replace’ button on the backside of the web page to retailer your settings.
The Responsive Menu plugin comes with many different choices that assist you to change the conduct and look of your slide panel menu. You possibly can discover these choices on the plugin’s settings web page and regulate them as wanted.
Now you possibly can go to your web site to see the menu in motion. Right here’s the way it seems to be on our demo web site. Word that if the present web page is within the menu, then it’s highlighted with a shade band.
We hope this tutorial helped you learn to add a slide panel menu in WordPress themes. You may additionally wish to study observe guests to your WordPress web site, or try our listing of must-have plugins to develop your web site.
In the event you appreciated this text, then please subscribe to our YouTube Channel for WordPress video tutorials. It’s also possible to discover us on Twitter and Fb.
The put up Tips on how to Add a Slide Panel Menu in WordPress Themes first appeared on WPBeginner.
Subscribe to MarketingSolution.
Receive web development discounts & web design tutorials.
Now! Lets GROW Together!