To set a Main Menu item as Mega Menu – Check the option as in below screenshot and SAVE

mega menu set

How to add background color:

To add background color to the mega menu content, use CSS. See example below. Change the color code to your color code.

background-color: #fafafa;

custom background color

How to add background image for mega menu:

To add background image for the main mega menu container, go to the main item and select Upload Background Image

background image

background image mega menu

To make the image repeat use this css

background-position: 100% 100%;

background css

 

How to add Images to Mega Menu items. 

Images as menu items with title below are added with text widgets. See the steps below.

a. Create Sidebar from Appearance – Sidebars – Add New. Add the sidebar Name. And click OK to save.

add sidebar

b. Add Text widget to sidebar

add widget to sidebar

Add in widget the image and text with HTML.

Example is below:

<div class=”megamenu-demos”><a href=”http://wpresidence.net/”><img src=”http://wpresidence.net/wp-content/uploads/2015/11/megamenu-demo1.jpg” alt=”demo” /></a><a href=”http://wpresidence.net/”>Main Demo</a></div>

 

text widget

widget for mega menu

How to add an icon to Mega Menu elements:

 

Find the fontawesome icon on https://fortawesome.github.io/Font-Awesome/icons/ or in wp-admin – editor.

editor

Select the icon

select icon

Copy the icon name:

icon name

Paste in Mega Menu settings:

icon here