Thrive Architect Feature Update: The Mega Menu

Author
David Gavrilut   18

Updated on December 30, 2019

A while ago, we released the new and improved Custom Menu element in Thrive Architect

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.

More...

The Thrive Architect 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: 

Add a Header on the Landing Page (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:

Find the Custom Menu element on the right sidebar

3. Choose the Mega Menu Option

After adding the Custom Menu on the Landing Page, select the “Simple Mega Menu” option

4. Choose between a Custom Menu and a WordPress Menu

Choose between a Custom Menu built entirely with Thrive Architect, 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: 

Pick a template for your mega menu, choosing from this library of templates made by our design team

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:

This is how the Mega Menu will look like for the visitor on a desktop

Translates to this menu structure in Thrive Architect:

This is how the Mega Menu structure looks like, in the Thrive Architect editor

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? 

Easy peasy.

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 default view on tablet for the menu inside a header

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): 

Changing the layout from “Hamburger” to “Horizontal” the makes the Mega Menu look better

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:

The “Hamburger” layout is the best choice for the menu on mobile view

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):

The Menu State and Menu Display options help you set up and visualize how the Mega Menu looks for your mobile visitors

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:

Mega Menu mobile view, using the “Drop down” Menu Display option

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!

by David Gavrilut  July 10, 2019

18

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. We only recommend products that we believe will add value to our readers.

Enjoyed this article ?

You might also like:

Leave a Comment

  • Thank you, David, this is a great video and a great feature again, can’t wait to transform our menu to something like this in our website! 🙂

  • Nice one!
    I’m guessing this is partially preparatory work for the new theme builder…
    I know people keep asking about it, but do you have any idea on a “ballpark” of when you’re likely to release it e.g. end of the summer or Q4 2019? 😉

  • Wow! David
    It’s a wonderful way for all blogger. I am new digital marketer and I always follow your article. I always wait for the new posts. Thanks a lot.

  • Nice. Are we ever going to see Thrive make it easier to pass querystrings and other variables.

    So when someone signs up for a ebook, the thank you page will contain their name for example.

  • Hi there, this menue is very cool and you guys did a lot of improvements just in a few month! Congrats – you are so fix, I hardly can catch up the new features …

    I’d like to have one more option *gg* – I use your Performag-Theme für my Magazin – and I and my team like this menue there very much – where you can see the thumbs of the recent blogposts.

    If I have a whish free, … 😉 … und you run out of ideas … *gg* … give us this menue, please. Thank you so much!

    • Thanks for the suggestion Eva. you’ll happy to know that we now added the option to have Images in the menu (maybe not exactly same as performag but you’ll be able to have images 🙂 )

  • Thank you for sharing this info. This new feature is fabulous and makes it so much easier to add another menu option other than a drop down (which I always hated on my site, but did not have the technical knowledge to change). I do have a couple of questions: I noticed that after adding the mega menu (Simple menu #10) to my Landing page, the menu does not show up in the responsive tablet and mobile modes (my logo does, but not my nav bar). Secondly, I would like to add the “Search” text box and icon in my header, but I cannot find any information within the Thrive University or elsewhere in the members section as to how do so. Can you help please? And keep up the great work. I love Thrive products and am a loyal customer.

  • I like this feature. I am noticing however that it does not update changes I make to it after saving the changes. is it a caching problem?

  • That’s great – if you use two layers of menus, how can you best display them in mobile view?

  • {"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}
    >