How to edit mega menu?

1. For Elementor Page Builder

You will have 2 ways to create mega menu: by theme built-in menu or menu content by Elementor. Kindly use only 1 way to build a mega menu (cannot mix both)

1.1. Theme built-In Menu

With this method, the menu will have columns with hyperlink text and images.

For example, I am going to create a mega menu for all of the item services on the menu. I will create 5 column menu including Destination, Adventure Tour, Safari TourHoneymoon Tour and Image Banner that look like this 

Mega Menu Image 16

Firstly, go to Appearance > Menu, and you will see the main menu right there. 

Mega Menu Image 13

Create five different menu (Destination, Adventure Tour, Safari TourHoneymoon Tour and Image  by adding a custom link, you will see it on the left side. URL is the link of page and Link Text is the name of this link

Mega Menu Image 15

Next, you also need to add other custom links to each of category that look like this

Mega Menu Image 17

On the Tour menu item settings, click on Show as Mega Menu, and choose Main Menu Columns is 5, choose the name and color of the highlight label if you want.

Mega Menu Image 14

On the Image menu, you have to insert the banner image where is shown on the mega menu

After doing that, click to Save Menu and see the results.

1.2. Menu Content by Elementor

You can now use Elementor to build MegaMenu content. With this feature, you can make interactive, easy-to-use menus that make it easier for people to look around your website. You can make your MegaMenu not only look great but also make it easy to navigate your site.

Step 1: Setup

To enable the MegaMenu content, activate Theme Options > Styling Options> Menu > Mega Menu (Build with WPBakery / Elementor).

Then navigate to Settings > Permalinks set Permalink structure set Post name and click the Save Changes button again even if you have chosen this already

Last, go to Elementor > Settings and tick the post type to be allowed to edit: Mega Menu. Click Save Changes

P/S: CustomCSS to make HeaderMenu show content full-width
.header__center #st-main-menu .main-menu {position: static;}

Step 2: Build Content on MegaMenu

Go back to your WordPress Dashboard, and find a Mega Menu section to add a new one.

For example, I add a new name – Mega Menu 1. Choose page template is Theme template

Finally, click Edit with Elementor to customize your mega menu.

New Version 310 Image 3.1

In this Elementor widget, you can choose the widget you want to edit by drag and drop it on the container. Click Update to save your changes

New Version 310 Image 4

Step 3: Choose MegaMenu to show on Header Menu

After that, go back to your WordPress Dashboard, find Appearance > Menu. On the Mega Menus tab, choose the Mega Menu 1 that you’ve just created and add it to the menu. You can change the navigation of the menu and click to choose the mega menu to show on your page. Click Save Menu 

Note: Kindly ONLY set Mega Menu on the menu level 1, such as Home, Blog,… Don’t set on sub-menu 

New Version 310 Image 5

Example #1

Example #2

Example #3

2. For WPBakery Page Builder

Go to Theme Options > Styling Options > Menu

  • Enable the Mega Menu to activate this option. Reload your admin dashboard again, you’ll see the Mega Menu section on the sidebar

     Notice: If you imported WPBakery Page Builder Demo, you needd to enable this option to create mega menu

Mega Menu Image 1

Note: To edit the mega menu page by WPBakery, you need to configure to enable WPBakery Page Builder for mega menu page.

  • Go to WP Bakery Page Builder > Role Manager> Change the Post Type to Custom and select the st_mega_menu post type to enable it.
Mega Menu Image 2

For example, I am going to create a mega menu for Hotel services. So I have to create three smaller menu inside on mega menu of Hotel, including Top Hotel, Top Destination and Best Deal that look like this

Mega Menu Image 3

Firstly, go to Appearance > Menu > Create a new menu inside a mega menu.

Mega Menu Image 4

Write the Menu Name and add a Custom Link to this menu. For example, I could list the top hotels and name them as [Mega Menu] Top hotelNext, add the custom link to the menu that you’ve just created. For example, I will create 3 custom link of three different hotels on [Mega Menu] Top Hotel.

Using the same method, you can also create [Mega Menu] Top Destination and [Mega Menu] Best Deal and add the custom link to the menu that you’ve just created.

Click to Save Menus when you finish creating these menus.

Mega Menu Image 5

On Admin Dashboard, go to Mega Menu > All Mega Menu and edit any mega menu you want

Mega Menu Image 6

Now change the name of mega menu , edit the Text Blocks,  Custom Link and Single Image

Mega Menu Image 8

For example, I changed the text block to “Top Hotel” and add a custom link to [Mega Menu] Top Hotel. Using the same method to apply for [Mega Menu] Top Destination and [Mega Menu] Best Deal.

Finally, click to Update this menu

Mega Menu Image 9

On Appearance > Menus > Select a menu to edit: Hotel Menu [Primary Navigation]

Click Hotel on the menu items and choose Mega Menu Hotel that you’ve just created

Click Save Menu and go back to your site to see the result.

Mega Menu Image 10