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, you will show you how to create a new menu, make it a sticky one (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 Main Menu section.

Header Menu (Main):

This option allows you to load a menu 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 for your website.

  • No preloading – default setting.
  • Optimized preloading – will be preloaded the first six items when you access the website.
  • Preload all – will be preloaded the first twenty items 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 on 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 on 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. 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 should it behave in different environments.

  • Disabled
  • Header logo – Click this option and on your sticky menu will be loaded the header logo
  • Mobile logo – This option allows you to add to your sticky menu a mobile logo. 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 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 Font Awesome 4 Menus plugin.
  2. To preview all 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 and select a menu that you want to edit and paste the icon code in a menu item, then Save the menu.
  4. If you want to add only an icon in 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 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 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 select the Category that you want to use from the drop-down

NOTICE:

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

Mega menu 3