Main Navigation Menu

Alex -

First you need to create new menu.

Types of Nav Menus

1. single column menu


2. multi column menu ("Mega" menu)


Creating menu

Menu structure:

  • first level - link
  • second level - column name or link
  • third level - link  (optional)



Select "css classes" checkbox inside "screen options" tab.


Creating multi column menu ("Mega" menu)

You need to add megaMenu to "CSS Class" field of first level menu item.


Customizing multi column menu


#1 Mega menu background image

1) Make sure that "Description" field of menu items is visible:


2) Fill the "Description" field of top level item (with css class megaMenu) with the link to image source.

Also you can set background image position (by default it will appear at the left-top corner). Add to "CSS Class" field one of the next values:

  • bgLeftBottom
  • bgLeftTop
  • bgLeftCenter
  • bgRightBottom
  • bgRightTop
  • bgRightCenter
  • bgCenterBottom
  • bgCenterTop
  • bgMiddle

Background image size. bgFit - image fits container. bgCover - image covers container.

  • bgFit
  • bgCover

Also we provide class bgClassic - background image fits container and appears in the right bottom corner.


#2 Link Icon

Navigate to Font Awesome Icons page.

Choose (Click on) desirable icon.

Copy icon tag

Add icon tag to the "Navigation Label" field.

Have more questions? Submit a request


Powered by Zendesk