How to manage mega menus

Video TrVideo:Video

Find the Mega Menu to Edit

Go to: Appearance > Menus > filter for Primary Menu

Assuming all of your menu links are nested appropriate following these instructions, you will be able to organize and manage your mega menu. If not, follow those instructions to add/remove/update the pages that you'd like to include in the mega menu and save.

Hover over parent page of the mega menu you want to edit. You should see a blue “Mega Menu” button appear. Click on that to open the mega menu editor.

In the mega menu editor, assuming we've set this up for you already, you will see:

The column structure of the mega menu on the front end
Widgets that correspond to the various text areas & child pages within that mega menu

To adjust the column structure, you should see arrows in the upper right corners of the columns of your mega menu. Using these arrows will allow you to adjust the number of columns (out of 12) that each mega menu column occupies. In the screenshot below, you can see that there are 4 columns, all divided into column widths of 4, which add up to 12.

NOTE: If you're unable to adjust the column widths, it's because there's a setting on that dynamically sets the width to a set number of columns. Click on the gear icon in the grey bar to see and edit this setting.

Editing a Mega Menu

To rearrange child pages, simply drag each child page into the appropriate column of the mega menu. Simply rearranging the cards by dragging and dropping will automatically refresh the mega menu. There is no need to save when arranging these widgets with drag and drop.
To edit the “text” widgets within the mega menu, click on the wrench icon to expand the widget and edit the text. Don't forget to click the Save button at the bottom of this little widget.
To edit the “image” widgets within the mega menu, click on the wrench icon to expand the widget and replace the image. Don't forget to click the Save button at the bottom of this little widget.
NOTE: If you do not see the text description under each menu item within this mega menu editor, it is because the description is located under the menu listing on the previous screen. See the description field in the menu structure editor.

Common mega menu questions

Did you add a page to the menus but it is not in the right place in the mega menu?

It's likely that the mega menu dynamically added the page to the bottom of the list in the mega menu editor so it will look like this:

You will have to drag that new page in the lower box to the appropriate position in the mega menu.

Once you do that, you have to then delete that lower widget and box, by clicking the trash can icon found here:

And then also here:

Do you want to delete a page from a mega menu?

In order to do this, you have delete the page from the Primary Menu listing. So you don't even need to access the mega menu pop up in this case. Just delete the page from the menu's list and it'll be removed from the mega menu.

Here's the support article on managing the Primary Menu or other menus such as the footer menus or header/ secondary navigation menus

Video Transcript:

0:00 Hello, today I'm going to go over some important tips and tricks for the Mega Menu and how to edit, uh, specific elements of your Mega Menu.

0:09 This applies to both Elementor as well as Gutenberg sites, but I will be using the Gutenberg sandbox, uh, just to show you how to do these specific things.

0:18 Well, there are two ways to get started to go to your menus. The first is if you hover over Appearance, you'll see menus are listed down here.

0:26 However, if you're on the home page or any page of the site on the front end, you can also hover over the Dashboard link, and menus are listed at the very bottom.

0:38 Once you go into the Menu Editor, it will show you whatever menu is currently selected from this selection box up here at the top. Currently, it's showing me the Main Nav, which is the one that will have the Mega Menu activated on it.

0:52 If you want to see other menus, you can just click the arrow, and you see the various other menus that include Footers or Secondary Navigation.

0:59 We also sometimes have the How-To menus in there as well. Once you've highlighted the menu you want, just hit the Select button, and it will load in the pages for that menu below in this Menu Structure section of the widget.

1:12 Now, when it comes to the Mega Menu, the Mega Menu exists as anything that appears in sort of a pop-out underneath, uh, the specific menu items.

1:23 This isn't very easy to illustrate in the Sandbox currently, but if I were to go to a different site, let me pull up a current one, and if any of the items that appear in this little pop-out are considered Mega Menu items.

1:41 So anything here, as well as these little grayed out areas off to the side, are all editable in your Mega Menu.

1:48 Alright, once you have your pages loaded in, you'll see there's a little blue button that appears that says Mega Menu.

1:58 Uh, there are a few different elements that you can edit specifically in this section, but the majority of the elements that you'll edit, including how to rearrange specific elements, or to add in those text boxes, will exist in this blue Mega Menu section.

2:14 Now before we go into there, if you do want to edit a description that appears underneath one of these sub-items, all you need to do is come up to the top, see screen options up here at the top, and make sure that the description box, as well as the CSS class, are selected.

2:29 If these items aren't selected, they just won't appear underneath, and so when you expand it you won't get to see this section here.

2:36 Or if you have any potential CSS class, uhm, CSS could apply if you, say, have a button on the front end that looks like a specific button class, this will usually be filled out with that button class.

2:48 So, any items that you want to, ah, add edit that are considered descriptions, which would be such as this section here, underneath this link, those are descriptions that you edit on the primary navigation structure.

3:01 page. now, since our sandbox currently doesn't have a Mega menu activated, um, it's going to come up with this pop-up that say I can't use it.

3:11 So, I will go back to the other client that we have pulled up and show you how to edit their menu.

3:15 So now I'm on the back end of that client's menu editor. Let's go back to the main menu. And here when I click on the Mega Menu button, it's it will actually pull up a second widget window.

3:29 So this is your traditional Mega Menu. Umm, most Mega menus once they're set up are going to be set to the grid layout.

3:36 That is what our developers use to style the menu and so some of these other ones like the standard layout or the tabbed layout will not be styled appropriately to match your site.

3:46 So you'll want to make sure that the grid layout is what is selected and it'll appear this way where you have some dragable options.

3:52 You can drag and drop these across. You can also, like that. You can also select, uhm, you can select certain widgets to add in, such as what you have over here.

4:05 You can add in text widgets, video widgets, or a visual editor. You can also increase or decrease the column width by- clicking these little arrows here.

4:14 And if you want to, say, have a different layout or you want to move some of these elements, you can also drag and drop these elements into various other columns and rearrange them as such.

4:29 Umm, if you expand these items, you'll notice these don't have any information here, and that's because the description box is edited in the previous window.

4:38 But these visual editors, if you expand, will have a full, was it, uh, sorry, widget, uh, wizzy wig where you can, include links to specific pages and descriptions that will be formatted appropriately for your site.

4:53 You can also have the image widget, and you can pull in specific images here, and have those images linked to things as well.

5:01 So this is how you get into your mega menu, and this is how you make any changes in here. Um, once you do make any changes to say the visual editor, you want to make sure you hit the safe button at the bottom, and then when you exit out, you'll also want to hit the safe button at the bottom.

5:17 Um, the menu editor will yell at you or come up with a warning box. If you try and navigate away from here without saving, it will make sure that you save any progress you've made before you leave the specific window.

5:30 But, uh, it's always best to just hit the safe button. The safe button down here, just to double check that any changes you made are applied.

5:38 So, you'll notice the mega menu only applies to the primary item up here, as well as any of the sub items below it.

5:45 Each of these primary items will have a different mega menu. So, here is the other mega menu, it has different items that you can rearrange, And then down a little bit lower, we have also a resources menu, where you can see different items as well.

6:03 Every site is going to be different, but this is the general idea of how you get into your mega menu, as well as how you make any changes, or view specific elements within it.

6:12 Umm. If you have any additional questions, feel free to let us know and, uh, we can get you very specific instructions that are relatable to your site and the various items that you have on your site as well.

6:24 Otherwise, thanks for watching and have a great one. Bye.