The Weaver Xtreme Plus plugins allows you to add “Mega-Menu” elements to your custom menus.

The content of the Mega Menu can be arbitrary HTML, including links, images, and even shortcodes. Because the MegaMenu content is wrapped by a standard Menu, you will likely have to add special styling to get the menu to look how you want. See the styling section later.

 

Adding a Mega Menu menu item

Mega Menu items can be defined only for WordPress Custom Menus (Dashboard : Appearance : Menus), and require that you first enable “Smart Menus”.

• Customize : Layout : Menus : Layout for All Menus
• Legacy: Main Options : Menus : Use Smart Menus

 

A Mega Menu is slightly different than a regular menu item in that both the menu label used to open the MegaMenu and the definition of the MegaMenu content are defined in the same place. Even though the MegaMenu appears as a “sub-menu” of a Menu Label, it is really part of the menu item. So, here’s how to create a Mega Menu.

To create a Mega Menu element, open the Menus menu from the dashboard, and select the custom menu that will have the element. The Mega Menu Element must be defined as a “Custom Link”.

• Mega Menus must be defined as a part of a Custom Menu (Appearance : Menus). We will assume you have most of your menu defined using the standard Custom Menus admin pages. So, to define a MegaMenu, you first create the Label/Menu by adding a Links entry to your menu.
• Define the MegaMenu’s content. You can fill in a URL or a # for the URL location. You can provide a Title Attribute if you wish. To make this menu item a MegaMenu, you add mega-menu to the CSS Classes box. Finally, define the content of the MegaMenu drop down using arbitrary HTML.

 

The above example was created using the following values:

 

You can define any URL or Label you want. To define the Mega Menu Element, you need to also add two things:

1. CSS Classes: add mega-menu and mega-normal as shown in the image.
2. Description: Define the Mega Menu contents in the Description field. This can be any arbitrary HTML code, including links, styling, and ever shortcodes. This is what will be displayed as the menu contents.

 

Styling the MegaMenu

Because the MegaMenu is part of your Menu, it will inherit all the styling of a normal Menu submenu. This usually means that you will have to add styling to get your mega menu to look like you want.

To help simplify styling your MegaMenu, Weaver Xtreme includes a class called .mega-normal that will “normalize” the MegaMenu somewhat when added to the CSS Classes menu definition box. After that, you will find it easiest to style the content of the MegaMenu by wrapping it directly in a <div>, and then styling that either by a style=”rules” directly, or by defining a special class to add to the wrapping: <div class=”your-class”>content</div>.

The width of your MegaMenu also takes specification. By default, the width is 25em. The only way to adjust the width is with a custom CSS rule, usually added to the Custom CSS Rules box on the Weaver Xtreme Fonts & Custom tab.

To change the width of the MegaMenu, change the 25em to the width you need in the following rule:

.mega-normal ul.mega-menu li {
     width:			25em !important;   /* the !important is necessary */
}

To change the styling for a MegaMenu, you can create your own rules based on the default MegaMenu styles. You can prefix any of these with .menu-primary, .menu-secondary, or .menu-extra to restrict the rules to a specific MegaMenu. You could also create your own class based on the .mega-normal class and add that to the Custom Menu CSS Classes per menu item option. Just replace the .mega-normal with your own class name in the rules below.

/* MEGA MENU Default Styling */
.wvrx-menu ul.mega-menu li {
	white-space:normal;
	width:auto;
}

.mega-normal ul.mega-menu li {
	width:			25em !important;
	padding:		1em;
	font-weight:	normal;
	font-style:		normal;
	font-size:		medium;
}

li.mega-normal ul.mega-menu li a {
	white-space:	nowrap;
	display:		inline;
	margin:			0;
	padding:		0;
	text-decoration: underline;
}

li.mega-normal ul.mega-menu li a:hover {
	background-color: transparent !important;
}