How to make a Mega Menu

Last Updated on

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

Go 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.

Add a menu.  

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

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

Parent View

Enable Make this Item Mega Menu option.  

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

Set Background Image (Optional).  

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

Add 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.

Add 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

Add Third Level Item.  

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

Third Level Menu Item Dashboard

Set 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 > General > Custom Sidebars 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

Add 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 column title.

Beware! Please consider that column titles WILL NOT be links and will act as title only

Column Title Dashboard

Column Title Front End

Beware! If you don’t want to have titles for columns inside Mega Menu, you simply need to add a – [shift+dash] character as the menu item name.

No Column Title

Was this helpful?
Previous Article:
Next Article:

Can't find what you're looking for?

Open New Ticket