WordPress Theme - Customizing The Menu

Our WordPress Themes utilise the built-in menu functions available to WordPress. We have extended these functions to add our unique features (mega menu, dropdown menus, descriptions, icons etc). Unlike other themes our themes do not use any plugins for this which makes them reliable and lightning fast.

How To Access The Menus

You can access the menus directly via WordPress under:

WordPress Admin > Appearance > Menus

Menu Locations

A WordPress theme is setup with menu locations, these are specific places within a theme where a menu can be assigned.

In the case of our WordPress Themes we have menu locations set within the header and footer. They are:

Main - The main menu displayed within the header.

Toolbar - The menu displayed at the top right.

Legal - Displayed within the footer to the right of the copyright text.

Visit the Manage Locations tab of the Menus page. On this page you can set the menu to use for each location. If you have followed ours steps to import the demo content this step will already be completed.

Customizing The Menus

In this section we will explore how to customize the menus. If your theme menus are showing as blank make sure you have followed ours steps to import the demo content.

You can create and customize menus/items on the menus page of WordPress. Select a menu at the top of the page 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 menu selected as the menu design within Wizard Panel 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 the classes used as:

navmain-dropdown-3col

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

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

Menu Depth

Our main menu 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.

Wizard Panel Settings

You can customize some menu features via Wizard Panel within the header tab. The menu specific settings are:

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 - Set the design of the main menu.

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 - Our main menu utilities CSS classes for highlighting, icons & mega menu customization.

Description - Our main menu supports the description for both parent links and child links. A description set for parent links will be displayed to the right of the dropdown box (Mega Menu layout only). When set for a child link it will be displayed underneath the menu item (Mega Menu layout only).

Icon - Our Toolbar & Legal menus support icons. To display an icon define the Font Awesome icon here. For the menus in the footer we use an icon of fal fa-angle-right.

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. This is the method we have used to add page links to the default menus. The advantage of this is the menu items will automatically update to 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 have used this method to add our 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

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

Main Menu - For example to add a highlight of new to a menu item within the main menu 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 icon by changing the new reference at the end to either of the supported highlights (popular, free, new, hot)

Menu Icons

The main menu supports icons which utilise images. The icon will be displayed when the menu design to set to mega menu within Wizard Panel. 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 of the main menu:

navmain-icon navmain-icon-custom1

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

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

Then finally you need to 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.

Creating A New Menu

You can create a custom menu by clicking on the create a new menu link at the top of the Menus page. Set a name and then add menu items to populate your menu. Your new menu can be assigned to any menu location.