Mag theme has four menu locations:

  1. Main Navigation Left – primary website navigation (shown on the left).
  2. Main Navigation Right – secondary website navigation (shown on the right).
  3. Side Navigation – side navigation opened with hamburger toggle.
  4. Mobile navigation – navigation that is shown for devices starting with tablet portrait.

To assign menu, go to Appearance/Menus, switch to Manage Locations tab and assign menus to the locations.

Search icon is not part of the menu. It can be enabled in Theme Options/Header Options.

Blocks icon is not part of the menu. It can be enabled in Appearance/Widgets by adding content to Overlay Sidebar.

 

Submenus

For default submenu style, just drag & drop to create submenu levels.

 

Mega menu

To use this menu style, you need to activate CSS Class. Click screen options on top right in Appearance/Menus and activate CSS Classes field.

To activate mega menu, add class megamenu to the first level menu item. Second level menu item will serve as column title and third level items as column content.

Mega menu can have from 2 to 6 columns. If you have 4 second level menu items, it means your mega menu will have 4 columns. Use classes like columns-3 to specify your column width.

megamenu

*Use hide-title class for second level item to hide column title.


 

Mega menu with articles

To use this menu style, you need to activate CSS Class. Click screen options on top right in Appearance/Menus and activate CSS Classes field.

To create tabbed menu use megamenu-tabs class. Second level menu items will serve as tab titles and description field will serve as content.

There are two more additional classes to style mega menu, add them next to megamenu-tabs class for first level item, separated by space.

Available classes are:
no-tabs – hides tabs
no-spacing – removes spacings from submenu and article items inside

Adding articles to the menu

To add articles into menu use [mnky_menu_posts] shortcode. Add this shortcode to description field of second level menu item (see screenshots above).

Shortcode supports following parameters:

  • offset – number of post to displace or pass over. To start with second post, enter 1. Default value is 0.
  • num – number of posts to display, from 3 to 6. Default value is 4.
  • order – choose between Descending (DESC) or Ascending (ASC). Default value is DESC.
  • orderby – order posts by any of the available parameters. Default value is date.
  • category – comma separated category (use category slug) list to include. Leave empty to include all categories.
  • tag – comma separated tag (use category slug) list to include. Leave empty to include all tags.
  • thumbnail_size – choose thumbnail size. Default size is 600x400. Available values are mnky_size-600x400, mnky_size-100x100, mnky_size-200x200, mnky_size-300x200, mnky_size-1200x800, thumbnail, medium, medium_large, large, full.
  • rating_show – show review rating using rating_show="on". Hidden by default.
  • rating_star_style – show rating stars as featured image overlay rating_star_style="overlay". Displays below title by default.
  • date_show – show post date using date_show="on". Hidden by default.
  • excerpt_show – show post excerpt using excerpt_show="on". Hidden by default.
  • label_show – show post label using label_show="on". Hidden by default.
  • post_format_hide – hide post format using post_format_hide="off". Enabled by default.
  • post_format_text_hide – hide post format text only (icon remains) using post_format_text_hide="off". Enabled by default.
  • post type – choose post type to show. Defaults to post.
  • custom_tax – custom taxonomy, e.g., “post_type_categories”.
  • custom_tax_terms – comma separated custom taxonomy term slugs.

Add only necessary paremeters when you want to change default values, example:

[mnky_menu_posts num="5" category="entertainment"]

 

Extra

Icons

If you want to add icon to your menu item, you can use simple html and add it to your menu item name. Example for adding Font Awesome icon:

  1. Go to Font Awesome icon list page.
  2. Choose your icon and click on it.
  3. You will be headed to the icon page, where the html code for the icon is available to copy.
  4. Copy icon html and add it to the name of your menu item.
  5. <i class="fa fa-comments-o" aria-hidden="true"></i> Help Center

 

One Page Menu

One page menu scrolls to the section with the specified id. To set it up follow steps below:

  1. Go to Appearance/Menus and add Custom Links item.
  2. Set unique ID link as menu item URL. For example, #about-us
  3. In css classes field of the menu item add: one-page-link
  4. Edit row in your page and in Row ID field add about-us
  5. Now when you click on menu item it will scroll to the row with same section id as menu link.