For websites that are complex and full of important information, creating useful site navigation can be a challenge. For those websites, it can be helpful to create a mega menu.
A mega menu is an easy way to layout a website’s main navigation clearly. It presents a lot of information in a small space. That’s because one menu item can expand into more, organized carefully to help websites visitors find what they’re looking for.
With the Nav Menu WPHubSite Theme Pro Module, creating a useful mega menu for your website has never been easier. It can be as simple as activating the correct Pro Module.
If you haven’t already done so, the first steps to creating an awesome mega menu is to do the following.
- Create a menu for your website (you need a menu to make part of it a mega menu)
- Activate the Nav Menu WPHubSite Theme Pro Module (the correct options in the menu won’t show up without it activated!)
Before we get started, take a look at what a simple mega menu can look like.
The Embed HubSpot menu item in the navigation is a mega menu instead of a simple drop-down menu. When visitors hover over a menu item that has been converted into a mega menu, it expands into a mega menu that can span several columns.
If the menu item wasn’t a mega menu then it would be one long column with no dividers.
Creating this mega menu with your WPHubSite website is easy once you’re ready with a menu and the Nav Menu Pro Module activated.
Let’s get started creating the mega menu for your WPHubSite WordPress website.
Table of Contents
- Create A Basic Mega Menu
- Create And Advanced Mega Menu With Site Builder
- Edit An Advanced Mega Menu Created With Site Builder
Create A Basic Mega Menu
Creating a mega menu has to be done in the menus section of the WordPress admin dashboard. The correct options aren’t available in the menus section of the WordPress customizer.
Step 1: Hover over or click on Appearance in the WordPress admin dashboard.
Step 2: Click on Menus.
Step 3: Click on the menu item you’d like to expand into a mega menu. All sub-items under that menu item will become menu items.
Step 4: Click the WPHubSite Theme Menu Settings button.
Step 5: Select the Enable Mega Menu box.
Step 6: Choose the width for the mega menu to span. Here are your options:
- Content: The mega menu will span only the width of your content which you set in the WordPress customizer for the WPHubSite Theme. This is the recommended option.
- Menu Container Width: Your mega menu will span only the width of the menu container. If you don’t have many items, this option could squish your mega menu or go outside your page.
- Full: The mega menu will span the entire width of the browser.
Step 7: Select a color for the background of your mega menu. You can also select a bit of transparency so your website content is still visible.
Step 8: Click the Upload Image button to select an image from the media library or upload one. The image will show up beneath the background color if you selected one. Be sure to set transparency for your background color if you want the background image to be seen.
Step 9: Select options for your background image if you selected a background image. Test these settings out but you’ll most likely want to stick with Cover.
Step 10: Choose colors for each option or leave them blank to inherit colors from your theme.
Step 11: You aren’t likely to set this for the main level but it can be useful for submenu items to point out items.
Step 12: Click the Save button.
Step 13: Click the close icon.
Note: Repeat steps 3-12 for any submenu item that you would like to customize.
Step 14: Organize your mega menu underneath the main navigation item (drag them around and indent items too) to configure it the way you’d like. Items indented once become the first item in each mega menu row and items indented a second time become items underneath the first item.
Step 15: Click the Save Menu button.
That’s all there is to it for creating a basic mega menu in the WPHubSite Theme with the pro modules. There are more advanced methods of creating mega menus too. Paired with the Site Builder, you can build a completely custom mega menu with modules and all in it and then call it under a top-level menu item in your menu.
Create An Advanced Mega Menu With Site Builder
You can create advanced mega menus with the WPHubSite Theme Nav Menu Pro Module. Advanced mega menus use a saved row that you create with the WPHubSite Site Builder. That means you can use the powerful drag and drop tools of the Site Builder to create completely custom looking mega menus.
Take a look at this custom four-column mega menu we created with Site Builder.
You can include any module in your mega menu this way to create functional and beautiful mega menus. You can even embed HubSpot forms, meeting modules, or anything else embeddable right in your mega menu!
The sky is the limit for what you can do with advanced mega menus when you use the Site Builder. Here’s how you can create your own advanced mega menu using Site Builder and the Nav Menu Pro Module in the WPHubSite Theme.
Be sure you’ve already activated the Nav Menu Pro Module.
Now to get down to creating the mega menu!
Step 1: Hover over or click on Builder in the WPHubSite WordPress admin dashboard.
Step 2: Click on Add New.
Step 3: Name this whatever you want so you can refer to the mega menu in Site Builder at a later time. Something meaningful to you.
Step 4: Select Saved Row from the drop-down menu.
Note: You can leave the global option unselected for the mega menu unless you have other plans for the mega menu also. Selecting this option is only good if you will use the mega menu format in other places on your website and would like them all synchronized.
Step 5: Click the Add Saved Row button.
This creates what looks like a page in WordPress but it’s not. Don’t get caught up changing settings and doing SEO because this page is not visible to anyone nor do the SEO settings affect anything. Continue on without changing a thing.
Step 6: Click Launch Site Builder.
Step 7: Drag modules and rows onto the canvas to create the mega menu of your dreams. If you’re not familiar with the Site Builder, refer to the help article for creating a new page, this covers the Site Builder in greater detail and there’s a video too.
Note: Be sure to also check how your saved row looks on tablet and mobile. You’ll want to test it in the Site Builder as well as the mega menu once you connect the two.
Step 8: Click the Done button and then Publish your Site Builder saved row.
Step 9: Hover over your website name in the admin bar.
Step 10: Click on Menus.
Step 11: Expand the menu item you’d like to attach the Site Builder row to in order to create the mega menu. You can create a new “custom links” menu item with the URL # and a name for the menu. This will let you attach the mega menu to a menu item that doesn’t link to any page.
Step 12: Click the WPHubSite Theme Menu Settings button.
Step 13: Select the Enable Mega Menu option to enable the mega menu on the menu item.
Step 14: Select how you’d like the content of your mega menu to behave. Either content are full are the best options but here’s an explanation of what each one is.
- Content: The mega menu will span only the width of your content which you set in the WordPress customizer for the WPHubSite Theme.
- Menu Container Width: Your mega menu will span only the width of the menu container. If you don’t have many items, this option could squish your mega menu or go outside your page.
- Full: The mega menu will span the entire width of the browser.
Step 15: Click Save.
Step 16: Click the close icon.
Important: In order to show the mega menu, we must create a container to hold the mega menu. Even if you created a custom link for the menu item in previous steps, you still need to create a mega menu container using the custom links option. Don’t worry, this link won’t actually show up in your menu, it’s just a container to hold the mega menu.
Step 17: Click the Custom Links option in the Add menu items column.
Step 18: Type # in the URL box.
Step 19: Type a name such as Mega Menu in the link text box. This isn’t important, it’s just for reference and will not be seen unless you choose it to be seen (coming up).
Step 20: Click the Add to Menu button.
Step 21: Drag the mega menu container you just created to be the first submenu item under the top-level menu item.
Step 22: Click the WPHubSite Theme Menu Settings button.
Step 23: Select the Hide Menu Label/Description option so the menu name doesn’t show. You can choose to show this if you’d like but it’s not recommended.
Step 24: Click the Content Source drop-down menu and select Template.
Step 25: Click the Template drop-down menu.
Step 26: Type the name of your mega menu row that you created in Site Builder.
Step 27: Click the saved row from Site Builder.
Step 28: Click the Save button.
Step 29: Click the close icon.
Step 30: Click the Save Menu button to save all the settings you changed.
That’s it! You created a beautiful mega menu in Site Builder and attached it to your menu with the Nav Menu pro module in the WPHubSite theme!
Above is the menu we created in Site Builder for our new mega menu. By hovering over the Embed HubSpot link in the navigation, the mega menu expands and provides more context and information than even the regular mega menu.
You can create advanced mega menus using this option but be sure to test. Not all modules will perform ideally in all circumstances in a mega menu. It’s best to test and find what works across desktop, tablet, and mobile.
Edit An Advanced Mega Menu Created With Site Builder
If you ever need to edit your mega menu created with Site Builder you’ll just need to edit the saved row in the builder.
Here’s how to do that.
Step 1: Hover over or click on Builder in the WordPress admin dashboard.
Step 2: Click on Saved Rows.
Step 3: Hover over the saved row of the mega menu.
Step 4: Click on the Site Builder option.
That’s it! When you’re done making changes be sure to publish them to see it live on your WPHubSite website.