Creating a Mega Menu
1 Step — Select or Create Mega Menu
Before starting the work, make sure that the JetMenu plugin is currently installed and active on the website.
Select the location on your menu (Main, Footer, Social) and Menu Settings. After that, in the JetMenu Settings block, toggle the Enable JetMenu for the current location option and click the Save button.
Go to the WP Dashboard and proceed to the Appearance > Menus tab. Here you can select one of the existing menus for editing or create a new one. Apply it for one or several of its items.
2 Step — Choose an Item
Now, to Enable the Mega Menu itself, choose the item to which you want to add a mega menu. Hover over it and click the JetMenu option that becomes visible on hover, positioned on the right from the item’s title.
If you want to set Mega Menus to several, or even to all menu items, just repeat the described actions for each of them.
3 Step — Click on the Jet Menu option
Right after you click on the JetMenu option a popup appears and the Content block will be opened by default.
Toggle Mega Submenu Enabled option to Yes, and click “Save”. Then, click Edit mega menu item content option to proceed to the Elementor editor.
- Mega Content — set up a Mega Menu position (Default or Relative the menu item) and choose custom menu width.
- Item Icon — simply pick up the menu icon and its color, if you want.
- Item Badge — with this setting it is possible to add a badge to the items, for example Trending or Sell and choose the color for them.
- In the Advanced, there is an opportunity to hide the navigation menu and customize the item’s padding.
- The last category is the Vertical Menu Widget — here set the width for Vertical Mega Menu Widget.
4 Step — Choose a Widget
Use any widgets to build a mega menu. You can use headings, sliders, portfolios, post layouts, videos, etc. Style them up according to your creative vision. In the example, we choose Posts Widget.
You can enrich with an appropriate content each menu item in the same way. When all menu items are customized, click the Save Menu button and open in Elementor the page, where you want to display the mega menu.
Displaying Mega Menu in Header Template
Well, now we can see our previous actions on the website. When all menu items are customized and saved, you can add the Mega Menu to the Header, for example, go to WP Dashboard > Crocoblock > My Library then choose Header you want Mega Menu to be applied to and Edit it with Elementor.
1 Step — Add a Mega Menu Widget in the Elementor Panel
So, choose one of the Widgets and drag it to a certain place on the page.
2 Step — Select and Customize a Mega Menu
Then, select a created mega menu in the Content block of the widget and choose from the massive amount of Style Settings to fully customize the appearance of the main menu and mega menu as well, for example, change the color, background, size, etc.
3 Step – Click Update and look at the Result
When everything is customized, click the Update button below and enjoy the effective view of the mega menu on the website.
Enrich the pages with attractive, eye-catching mega menus and draw visitors’ attention to your website using JetMenu functionality.
You will find a detailed guide on this topic here.