Configuring Navigation Menus for Suit Mag Pro

You are here:
< Back

Suit Mag Pro support menu in five different locations

  1. Primary: It’s the main menu located just after the header.
  2. More Edition: It is located on the right side of the primary menu.
  3. Secondary: It is located on the right side of the top bar and left of Top Bar Social Menu
  4. TopBar Social Menu: it is located on the right side of the top bar.
Navigation menu - primary, secondary, social and more edition
  1. Footer Social Menu: it is located on the right side of the footer.

Creating and assigning items to the navigation menu.

You can create a navigation menu following two methods: either by using the customizer or menus section in the WordPress Administrative Dashboard.

Using customizer

  1. Hover on the Appearance tab in the left sidebar of WordPress Administrative Dashboard. Click on the customize section.
customizer
  1. You will get a customizer option. Now, click on the Menu tab.
Menus
  1. Click on the Create New Menu button.
Create New Menu
  1. Name the menu and select where you would like to display it, in the Menu Locations section. Click the Next button to start adding items.
New Menu
  1. Click the Add Items button. Items arranged as per Pages, posts, Category, Tags, Custom Links, etc – will pop up at the right side of the customizer panel.
Add items to new menu
  1. Click the headings to expand the selection and finally click the “+” symbol to add the required items in the menu.
adding items to the menu
  1. To create a submenu, click the item and drag it to the right side.
creating sub item
  1. Repeat the procedure to create menus for all locations.
  2. Finally, click the publish button to save the configuration and publish it live.

Using menus section

  1. Hover on the Appearance tab in the left sidebar of WordPress Administrative Dashboard. Click on the Menus section.
menus
  1. Click on create a new menu link.
creating menu
  1. Name the Menu and then choose the desired display location. If you would like to add new top-level pages then choose Auto add pages option. Click the Create Menu button.
creating menu
  1. Now choose the desired items from Add menu items’ list and click Add to Menu button to add in the menu.
add item to menu
  1. To create a submenu, click the item and drag it to the right side.
  2. Finally, click the Save Menu button to save it.
creating sub item
  1. Repeat the procedure to create menus for all locations.

Customizing menu

Suit Mag Pro supports customization for the primary menu. Before working with customization, you need to activate CSS Classes and Description for the menu.

For this, click on the Screen Options button found at the top – right of the Menus page.

Tick the options for CSS Classes and Description under show advanced menu properties.

activating css classes and description

You will now get the option to insert css class and description when the item is expanded.

Here’s the list of customizations:

Adding Mega Menu: Expand the top-level parent item. Write “mega-menu” in CSS Classes.

adding mega menu class

output:

mega menu

Home icon instead of text: Expand Home. Write “home” in CSS Classes.

Add tag in the menu item: Expand the item. Write “tag” in the description and “color name” in the class.

css and description to menu items