How to make a Mega Menu
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
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.
From the top left of the screen, you can use the New Menu section to Add New Menu.
This Item can be found inside each menu item as a checkbox
Set a background image for your Mega Menu container by clicking on Set Background Image button.
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 a second level item inside the menu to serve as title for the Mega Menu Column.
Set third level menu items which will act as Mega Menu column items.
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_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="http://themeforest.net/item/jupiter-multipurpose-responsive-theme/5177775" t align="left" fullwidth="false" margin_top="0" margin_bottom="0"]PURCHASE NOW[/mk_button]
And the result is this:
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.