How to make a Mega Menu

Updated on January 2, 2019

With the introduction of Jupiter version 4.0, there are some changes regarding Mega Menus. Mega Menus are a way of adding rich submenus with multiple columns. Mega Menu now can accept widgets as columns.

Steps to make a Mega Menu

1Go to Dashboard Appearance Menus.  

To do that you simply go to Dashboard Main Menu section and hover over Appearance and you will see a submenu called “Menus”. Select that menu.

2Add a menu.  

From the top left of the screen, you can use the New Menu section to Add New Menu.

3Create a menu item which will serve as first level and parent of the Mega Menu. 

Parent View

4Enable Make this Item Mega Menu option.  

This item can be found inside each menu item as a checkbox.

5Set Background Image (Optional).  

Set a background image for your Mega Menu container by clicking on Set Background Image button.

6Add necessary CSS code (Optional).  

Add necessary CSS code into Mega Menu Container Styles area to fine tune your background image.

Here is an article of common CSS codes that you can use for this option.

7Add second level item (Optional).  

Add a second level item inside the menu to serve as title for the Mega Menu Column.

Second Level Menu Item Dashboard

Second Level Menu Item Front End

8Add Third Level Item.  

Set third level menu items which will act as Mega Menu column items.

Third Level Menu Item Dashboard

9Set a Widget Area (Optional).  

You can set a widget area as column by selecting it from Mega Menu Widget Area option for second level menu items. In this case, second level menu items will act as a column and not column title, as in step 7.

For example we set the Mega Menu Widget Area option to shop menu col 1 in one of Shop mega menu sub menus in Jupiter default template. Previously we went to Theme Options > Sidebar and added shop menu col 1 sidebar there. Then we went over Main Dashboard Menu > Appearance > Widgets and assigned a Text widget to shop col 1 Widget area. Inside that text we added the shortcode of a button:

[mk_padding_divider size="10"]
[mk_button dimension="outline" corner_style="pointed" size="medium" outline_skin="custom" outline_active_color="#ffffff" outline_hover_color="#333333" bg_color="#f97352" btn_hover_bg="#252525" text_color="light" icon_anim="none" target="_blank" url="" t align="left" fullwidth="false" margin_top="0" margin_bottom="0"]PURCHASE NOW[/mk_button]

Mega Menu Demo Options 1

Mega Menu Demo Options 2

And the result is this:

Mega Menu Demo Options 3

10Add Column Title (Optional).  

Widget Area

You can set a widget area for third level menu items which will make them go under a column in Mega Menu. In this case, second level menu items will act as a column title.

Column Title Dashboard

Column Title Front End

No Column Title

Did this answer your question?