WizardPanel - Customizing Menu1

Menu1 is the original WizardPanel main navigation system. It supports both Mega Menu and Dropdown layouts and uses the standard WordPress menu editor together with CSS Classes for additional customization.

For general information about accessing menus and assigning menu locations see the Navigation & Menus guide. If you are using Menu2 see the Customizing Menu2 guide instead.

Selecting Menu1 In WizardPanel

Important: Before customizing Menu1 go to WizardPanel > Header and set the Menu Design. Menu2 is the first/top option. The Mega and Dropdown options underneath it are both Menu1 designs.

Select Mega to use the Menu1 Mega Menu layout or Dropdown to use the standard Menu1 dropdown layout. Do not select Menu2 when following this guide.

Customizing Menu1

You can customize Menu1 from WordPress Admin > Appearance > Menus. Select the menu assigned to the Main location to begin editing.

Mega Menu Display

We have added many customization options to the Mega Menu dropdown. To create a mega menu you must have Mega selected under WizardPanel > Header > Menu Design and setup a menu item with children.

Once setup you can have a right text column display within the dropdown by adding a description to the parent link. Remove the description to remove the sidebar.

The dropdown will display menu items side by side. We have added support for displaying 1-5 per row. This is achieved by setting the CSS Classes on the parent menu item. For example for a 3 column display use:

navmain-dropdown-3col

Change the 3 reference to between 1 and 5 to change the display.

By default we recommend using 2 for header design 1 and 3 for header design 2. If you remove the sidebar you may wish to display more items per row.

Menu Depth

Menu1 supports 2 levels. When editing the main menu drag an item one position to the right to set it as a child of a parent. Parents with children will display as dropdown menus.

WizardPanel Settings

You can customize Menu1 features via the options panel within the header tab. The menu specific settings include:

Header Design - The header design will change the location of the menu. Design 1 will display the menu to the right of the logo, design 2 will display it underneath the logo.

Menu Design - Select either the Mega Menu or Dropdown Menu1 design.

Sticky Menu - When enabled the menu will stick to the top of the browser when scrolling.

Home Button - Displays a home icon at the start of the main menu.

CTA Button - Displays a bold Call To Action button at the right of the main menu.

Enabling Menu Settings

By default WordPress hides some options. On the Menus page click on Screen Options in the top right and enable Description, Link Target & CSS Classes.

Customizing Menu Items

You can edit your selected menu within the Menu Structure section. Each menu item represents one link within the menu. Select a menu item to begin customizing. Each menu item supports various attributes:

URL - The URL is the path to the page. Items with a type of page will already have this set in the background. Custom Link items allow you to set a manual URL. URLs starting with #software_url_ are Software Integration links. These will generate automatically so do not need to be edited. For example #software_url_register will use the Register page of your chosen software.

Navigation Label - Set the visible name of the menu item.

Title Attribute - This value is sometimes displayed when a menu item is hovered over. It is optional but may be a benefit to usability.

Open link in a new tab - When checked the menu item will open the page in a new tab/window.

CSS Classes - Menu1 uses CSS Classes for highlighting, icons & mega menu customization.

Description - Menu1 supports descriptions for both parent links and child links. A description set for a parent link will be displayed to the right of the dropdown box when using the Mega Menu layout. When set for a child link it will be displayed underneath the menu item.

Adding Menu Items

You can add a menu item using the Add menu items section to the left. Once you have added a new menu item you may wish to customize it. There are a few different options available:

Pages - This contains all of your pages from WordPress Admin > Pages. Select the page(s) you'd like to add and click on the Add to Menu button. Page menu items automatically follow page title and URL changes.

Posts - Works the same as pages but contains direct links to your posts as setup in WordPress Admin > Posts.

Categories - Works the same as pages but contains direct links to your categories as setup in WordPress Admin > Posts > Categories.

Custom Links - Add custom links to your menu. This is perfect for specific URLs, external sites or non-WordPress pages. We use this method for Software Integration URLs that start with #software_url_.

Removing Menu Items

To remove an item from a menu click on the menu item and then click on the Remove link at the bottom left of the box.

Menu Highlighting

Menu1 and menus used within the footer as widgets support menu highlighting. Highlighting allows you to display a badge icon on a menu item. Highlight options include hot, popular, free & new. We use the CSS Classes attribute to achieve this.

Menu1 - For example to add a highlight of new to a menu item use the following as the CSS Classes:

navmain-highlight navmain-highlight-new

Footer Menu (widget) - For example to add a highlight of new to a menu item within the footer use the following as the CSS Classes:

footermain-highlight footermain-highlight-new

In both examples you can change the new reference at the end to another supported highlight such as popular, free or hot.

Menu Icons

Menu1 supports custom image icons when using the Mega Menu design. The icon is loaded as a CSS background.

For example we use the following CSS Classes to display the cPanel icon on the Shared Hosting link:

navmain-icon navmain-icon-custom1

If you'd like to add a new icon change the custom1 reference to a unique word. For example icon1. Use that as the class for the menu link.

Next upload the icon to wp-content/themes/your_design/images/. For this example we will use icon1.png.

Then add the following CSS using custom CSS:

/* icon1 icon */

.headermain.headermain-design1 .navmain .navmain-dropdown-megamenu .navmain-subcontainer .navmain-icon.navmain-icon-icon1 a::before,
.headermain.headermain-design2 .navmain .navmain-dropdown-megamenu .navmain-subcontainer .navmain-icon.navmain-icon-icon1 a::before {
	background-image: url("../images/icon1.png");	
}

As you can see we have loaded the icon1.png image and changed the class to -icon1.

You can add unlimited icons by duplicating this code.