Telling theme has three menu locations:

  1. Main navigation – main website navigation is displayed in website header or in side menu depending on selected layout.
  2. Secondary navigation – secondary navigation is displayed in website header next as a second navigation block.
  3. 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. Menu locations can be left unassigned if not utilized.

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

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.

Mega menu is displayed with with standard menu styles only and is not available for side menu.

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.

You 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.

*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 mnky-600x400. Available values are mnky-600x400, mnky-100x100, mnky-200x200, mnky-300x200, mnky-1200x800, thumbnail, medium, medium_large, large, full.
  • hover_effect – choose hover effect. Available values are mmp-grayscale, mmp-blur, mmp-scale.
  • display_rating – hide review rating using display_rating="off". Enabled by default.
  • display_date – hide post date using display_date="off". Enabled by default.
  • display_excerpt – show post excerpt using display_excerpt="on". Hidden by default.
  • display_label – hide post label using display_label="off". Enabled by default.
  • display_post_format – hide post format using display_post-format="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

Additional classes

We have prepared some classes for use in standard and side menu styles. Just add it to the CSS Class field of the menu item.

(To activate CSS class field click screen options on top right in Appearance/Menus.)

Available classes are:

strong
menu-button

strong class applies bold style to the current menu item.
menu-button class transforms menu link to a button style element.

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.