Thrive Architect Feature Update: The Mega Menu
This means that you can create stunning navigation menu layouts, that are also mobile-friendly and super easy to customize.
However, in the latest release we cranked it up a notch…
We made it possible for you to create large, gorgeous looking drop-down navigation menus for your Landing Pages, built 100% with Thrive Architect!
Meet… the Mega Menu.
How to Create a Mega Menu
The mega menu allows you to display a lot of different products or items that the visitor can access right away, without having to look for them all over your website.
To find out exactly in which cases a mega menu works well for your website, and why is it better than a regular dropdown menu, check out this Nielsen Norman Group article.
Here’s how such a navigation menu can be set up in Thrive Architect:
1. Add a Header on your Landing Page*
Whether you are editing a Homepage or a Lead Generation Landing Page, you can add a header from Settings > Global > Header:
*The Mega Menu can be added on your regular WordPress pages, as well. However, in this article we show you how you can display the Mega Menu inside a Landing Page Header.
2. Place a Custom Menu inside the Header
If the Header you have added already has a predefined Custom Menu inside it, remove it, drag a brand new Custom Menu element from the sidebar and drop it inside the Header:
3. Choose the Mega Menu Option
4. Choose between a Custom Menu and a WordPress Menu
If you have already set up the structure of your navigation menu using the WordPress settings, you can choose the “WordPress Menu” option.
However, if you are looking for a friendlier, easier to use interface, you can use the “Custom Menu” option and create your navigation menu structure using Thrive Architect.
5. Pick a Mega Menu Template!
After you have chosen your mega menu source, you will be greeted with a bunch of cool templates that come straight from our design team.
Pick the one you like best:
6. Set Up the Structure of Your Mega Menu
Here’s where it gets interesting.
You can now set up the entire structure of your menu - Which menu item you want to have a large dropdown, how large do you want the dropdown to be, etc.
To restructure the navigation menu, you can simply drag and drop the items around, being aware of all the different subitems.
For example, this navigation menu:
Translates to this menu structure in Thrive Architect:
You can also rename or delete any of the items, but you can also add new ones by using the “Add New” button at the top of the structure.
Before you set up the structure...
In order to see the Mega Menu structure in the sidebar, make sure the “Simple Mega Menu” is selected (the easiest way to do so is with the breadcrumbs. If any other element within the Mega Menu is selected, you won’t see this structure in the sidebar):
In order to use the menu structure, make sure the "Simple Mega Menu" element is selected
Display the Navigation Menu on Other Pages
You might be wondering, how can you display the menu on other Landing Pages too?
All you have to do is go on a different Landing Page where you want to display the menu, load in your Header, and that’s it!
The Header is a Global element, which means that it was specifically created to be used in different places of your website without any extra work!
If you want to learn more about how to use headers and footers in Thrive Architect, check out this tutorial article.
100% Mobile Responsive Mega Menu
The mobile view... So important.
The Custom Menu element was created with that in mind, as well. Every single one of its templates is 100% mobile responsive.
Let’s start with the tablet view, though.
By default, a simple header with a logo on the left and the menu on the right looks like this on tablet:
The menu is displayed as a “Hamburger” layout by default, but you can easily change that by switching to a “Horizontal” layout, from the left sidebar.
This will change the view for the Mega Menu on tablet (making it better, in my opinion):
Now let's check out the mobile view.
Here it makes more sense to use the “Hamburger” layout, simply because it saves you a lot of space:
You then have a lot of customization options for the mobile view...
The most important one, from the Mega Menu perspective, is the “Menu Display” option, as well as the “Menu State” option (which allows you to view the menu dropdown open or closed, in mobile editing view):
Through "Menu Display", you can set up how do you want the drop-down section to show up on mobile, if the visitor selects it.
My favorite display option is “Drop down”, this will make the section show up like this:
Try it Out!
Go ahead and build your own Mega Menu, on your own WordPress website!
Make sure to check out all of its cool templates, and see which one fits best for your business.
If you have any questions about the new feature, leave them below and let’s have a chat!