Main menu/Mega menu

The IonMag theme is so versatile, that you can choose where you want to use the menus. The theme supports custom WordPress menus, with multiple levels of drop-down for the main menu. There are three areas of the theme where you can display a menu: the Top bar, the Main Menu, and the Footer Menu.

In this section, we will show you how to create a new menu, make it sticky (on the desktop, mobile, and retina ready devices) and customize the Main Menu.

Main menu

The theme provides a few general options for the Main Menu. Go to Theme Panel > Header, and expand the Main Menu section.

Header Menu (Main):

This option allows you to set a menu that was created earlier, as the main menu. With this function, you can also choose to display a menu for the footer or the top bar.

Mega menu preloader

This option offers you a way to brings a performance hit to your website.

  • No preloading – default setting.
  • Optimized preloading – the first six items will be preloaded when you access the website.
  • Preload all -the first twenty items will be preloaded when you access the site.

Sticky Menu

This option gives you the freedom to decide the behavior of the header menu on the scroll.

  • Normal menu – This is a non-sticky one. Choosing this will make your main menu stay fixed in the top section of your website, and will disappear from the viewport when you scroll down the pages.
  • Always sticky – This option makes your menu sticky on your website. Even when you scroll down the pages, the main menu will always stay in the top section of your viewport.
  • Smart snap (mobile) – This option defines the behavior of your main menu on the mobile and retina ready devices. If you choose this option, the sticky menu hides on mobile devices when you scroll down and it shows up when you scroll up.
  • Smart snap (always) – This option defines the behavior of your main menu on the desktop and the mobile and retina ready devices. When choosing this option, the sticky menu hides when you scroll down and it shows up when you scroll up, extending the viewport for a better user experience.

Logo on sticky menu

You can decide if you need a logo to be loaded on the sticky menu, and how it should behave in different environments.

  • Disabled
  • Header logo – Click this option, and the header logo will be loaded on your sticky menu
  • Mobile logo – This option allows you to add a mobile logo to your sticky menu. Notice: You can use this option only if you already uploaded a mobile logo (Theme panel – Header – Logo for mobile).

After you finished customizing this section, click the Save Settings button.

Main menu 1

To create a new Main Menu, go to:

  1. Go to your WordPress Dashboard > Appearance > Menus
  2. Select the link Create a New Menu
  3. Write a name for your menu
  4. Press the Create Menu button

Main menu 2

To customize your new Main Menu:

  1. Start to add menu items from the left panels (Homepages, Pages, Links, Categories)
  2. You can manage your menus by using the drag and drop functionality and rearrange the menu items in the desired order.
    After setting up your menu, scroll down to the bottom of the page and assign the menu to one of the three Theme Locations at the bottom. Select Header Main for Main Menu.
  3. Click the Save Menu button

 

Main menu 3

To add a font Icon in the Main Menu/Top menu:

  1. Go to Plugins -> Add new, and install the Font Awesome 4 Menus plugin.
  2. To preview all the available Font Awesome icons, go here. Click on an icon that you want to use and then copy the code of the icon
  3. Go to Appearance -> Menus, select a menu that you want to edit, paste the icon code in a menu item, then Save the menu.
  4. If you want to add only one icon in the menu(without text) add this td-only-icon to the icon code for a better alignment.

Font awesome

Font awesome 2

 

Font awesome 3

Font awesome 4

Font awesome 5

Font awesome 6

Mega menu

Mega menus are useful if you want to show posts from specific categories inside the menu. The mega menu has a subcategory support, meaning that your visitors can switch from a category to another one in the menu.

Mega menu with sub-categories

Mega menu 1

To create a MegaMenu with Sub-categories

  1. Go to Appearance > Menu
  2. Add menu items from the left panels (Pages, Links, Categories)
  3. Click on the menu item and select the Category that you want to use from the drop-down

NOTICE:

  • You have to use a parent category if you want to have sub-categories.
  • Also, please make sure that the Menu Item used as MegaMenu is in the root of the Menu and doesn’t have sub-menus inside.

Mega menu 3

Mega menu without sub-categories

Mega menu 2

To create a MegaMenu with Sub-categories

  1. Go to Appearance > Menu
  2. Add menu items from the left panels (Pages, Links, Categories)
  3. Click on the menu item and from the drop-down, select the Category that you want to use

NOTICE:

* You have to use a category that doesn’t have sub-categories.
* Also, please make sure that the Menu Item used as MegaMenu is in the root of the Menu and doesn’t have sub-menus inside.

Mega menu 3