To setup a new menu or edit an existing one, navigate to Appearance > Menus. Make sure your menu is assigned to the “Main Navigation” display location by checking the box associated with it. This is what you should be looking for on your screen:
Menu Font Size
The font size of the Main Navigation can be adjusted via Appearance > Customize > Header > Header Styles.
The colors used by the menus can be changed via Appearance > Customize > Header Colors. This section will provide color controls for:
- Navigation Font Color
- Header Background Color
- Menu Dropdown Font Color
- Menu Dropdown Background Color
Mega Menus are multi-column drop down menus. Example:
How to set up Mega Menus?
When editing the main navigation in the WordPress menu editor (Appearance > Menus), click the parent menu item you’d like to open up a multi-column drop-down menu and check the “Is Mega Menu” box, as you can see in this screenshot:
Then start organizing your multi-level navigation menu:
Mega Menu Background Images
Menu items set to be displayed as Mega Menus will support background images. To associate an image with your mega menu, simply paste in the image URL in the Background URL box.
Hover Images for Menu Items
The menu items in a mega menu will support image hovers, like the one you can see in the demo:
To associate an image with your menu item simply paste in the image URL in the Background URL box.
Cannot find the CSS Classes field?
Head on to the “Screen Option” button at the top of the page and make sure the “CSS Classes” filed is checked to be shown on the screen.
How to display two menus in row like the demo example?
When editing the main navigation in the WordPress menu editor, click the item you’d like to display like the example below and type in “upper” in the CSS Classes box. Keep in mind that the menu item called “SHOP — PAGES” is not a parent for the items underneath it.
How to add links to Product Categories in a Menu?
In Appearance > Menus, find the “Product Categories” section where you should see your available categories, just as you can see in this screenshot:
If you cannot see this box, check the Screen Options and make sure it’s enabled.