Thursday, November 28, 2019
Beginners Guide 2 Quick Methods to Create a WordPress Mega Menu
Looking for a way to create a WordPress mega menu at your site?By default, WordPress makes it easy to create a simple drop-down menu using core functionality, but unfortunately, theres no core support for mega menus.Alls not lost, though! Its still plenty easy to create a WordPress mega menu for your site. And in this post, Im going to:Share the options you have for creating a WordPress mega menuGive you a step-by-step tutorial for how to create a mega menu using a free plugin If you want to create a mega menu for your WordPress site, you have two general approachesOption 1: See if your theme supports mega menusSome themes offer built-in mega menu support. For example, the Hestia theme includes built-in functionality to create a mega menu.Unfortunately, I cant tell you whether or not your theme supports a WordPress mega menu, nor can I give you a tutorial for how to set up your themes mega menu because each theme is different.But, its always a good first step to check your themes doc umentation to see if it already has a way for you to create a mega menu.Option 2: Use a WordPress mega menu pluginIf your theme doesnt have mega menu functionality (or maybe even it does!), you can also use a WordPress mega menu plugin to add mega menu functionality to any WordPress theme.Is it better to use your theme or a WordPress mega menu plugin?Now, you might be wondering, if my theme already supports mega menus, is there any reason I still might want to use a mega menu plugin?Well, there might be. Here are the pros and cons of each approachThe benefit of using your themes mega menu functionality is that it will instantly match the rest of your themes styling as soon as you add it. Basically, its convenient.The downside, though, is that if you ever switch themes, youll lose your mega menu functionality.On the other hand, the benefits of using a WordPress mega menu plugin are that:Your mega menu will continue to work even if you switch themes.Youll probably get access to more f unctionality.But the downside is that you might need to play around with the plugins styling options to make it match your theme.How to create a WordPress mega menu with a free pluginThere are several plugins that can add mega menu functionality to your site, but the most popular and highest-rated by far is Max Mega Menu: Max Mega Menu Author(s): megamenu.comCurrent Version: 2.7.2Last Updated: September 9, 2019megamenu.2.7.2.zip 96%Ratings 3,422,149Downloads WP 4.9+Requires This free plugin lets you build your mega menu using regular WordPress widgets, which makes it very beginner-friendly.To get started, make sure to install and activate the Max Mega Menu plugin (learn how to install a WordPress plugin). Then, youre ready to follow along with the guide.Step 1: Enable the mega menu functionalityTo enable mega menu functionality, go to Appearance ââ â Menus in your WordPress dashboard.Now, select the menu location for your header. Usually, this is the default menu (i.e. i ts already selected) and it has a Display Location area like Primary Menu, Top Menu, Top etc.If you dont have any menus yet, you can follow this guide to create your first menu.Once youve selected the menu location where you want to place your mega menu:Find the new Max Mega Menu Settings box on the leftCheck the Enable boxClick SaveStep 2: Build your mega menu layoutOnce youve enabled mega menu functionality:Hover over the menu item that you want to use to open the mega menuClick the blue Mega Menu button.In the example below, the mega menu will appear when a user hovers over the Shop menu item:Clicking the blue button should open the mega menu builder interface.First, choose the type of display mode you want to use. Ill use Mega Menu Grid Layout for this tutorial as its pretty flexible. Then, use the drop-down menu on the right to add a widget to your mega menu:You can use any of the standard WordPress widgets in your mega menu, which gives you a lot of flexibility. And you can a lso use the + Column and + Row buttons to organize the layout for your mega menu.Continue adding widgets for all the content you want to display in your mega menu.To edit widgets and add content, click the Wrench icon. And to move them around, you can use simple drag and drop:Make sure to Save each individual widget after you make any edits.Once you finish building your layout, you should have something that looks roughly like this:If you want, you can also dig into the Settings and Icon areas. But you arent required to configure any settings there.And at this point, you now have a working mega menu:As you can see, though, the menu styling isnt quite right yet the black background on the menu items doesnt really fit with the rest of the theme*.If youre experiencing a similar issue, youll need to dig into the plugins settings to change some colors to make everything fit together.*Note if you are actually using the Hestia theme, Max Mega Menu already includes a pre-built design them e to fix this issue. All you need to do is go to Appearance ââ â Menus and choose the Hestia option from the Theme drop-down in the Max Mega Menu Settings no need to edit any other settings!Click to see Hestia theme fixStep 3: Configure mega menu styling (if needed)To configure your mega menus style, go to Mega Menu ââ â Menu Themes in your dashboard. Then, select the Menu Bar tab.There, youll need to edit some colors to match your theme. Normally, the most relevant options to edit are:Menu BackgroundMenu Background HoverYou might also need to change the font color as well:Once you do that, your mega menu should fit more closely with your themes styling:Other settings and premium featuresYou now have all the tools that you need to create a basic WordPress mega menu. But Max Mega Menu has a deep feature list, so if you want to customize some small aspect of how your mega menu functions, I encourage you to further explore the plugins settings to see what all there is to offer .Additionally, theres also a premium version that gives you:More types of mega menusDedicated WooCommerce and Easy Digital Downloads supportMore control over stylesFinal thoughtsRemember if you need to create a WordPress mega menu, you have two good options.If your theme offers mega menu support, thats always a great first option. Just remember that youll lose your mega menu if you switch themes and you might not have as much flexibility.And if your theme doesnt have a mega menu feature, or if you want a little bit more portability and flexibility, the free Max Mega Menu plugin can help you add a mega menu to any WordPress theme.Have any other questions about creating a mega menu for your WordPress site? Leave a comment and well try to help out! Here's how to create a mega menu for your #WordPress site. #tutorial
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment
Note: Only a member of this blog may post a comment.