Mega menus

[vc_row][vc_column width=”1/2″][as_heading title=”Mega menu overview” subtitle=”from theme documentation” title_style=”float_left” sub_position=”above” subtitle_color=”#999999″ no_decoration=”yes” title_size=”168.75%” enter_anim=”none” anim_delay=”500″ abs_heading=”” abs_left=”11.5%” abs_right=”11.5%”][vc_column_text]Mega menu is theme built-in specific feature of Olea theme. It turns regular WP menu into Mega menu capable menu using custom post meta additional input fields in menu items edit page (Appearance > Menus)

Mega menu is created with simplicity in mind, yet to offer additional options and menu system expandability. Please read carefully explanations bellow and watch the videos:

 

Create Mega menu:

  • Create 1st level menu item using “Links” (custom menu item) – drag and drop to main items editor Check the “Mega menu” checkbox – this will be the “parent” of mega menu – on this item mouse hover the sub-menu with “mega menu capabilities” will appear
    NOTES:

    Only the 1st level of menu items can be MEGA MENU PARENTS

    Only “Links” (custom menu item) can be MEGA MENU PARENTS (or mega menu holder)

  • Under the same 1st level menu item, create sub-menu (2nd level) item as mega menu section title (can be link too – use any menu type)
  • Under the 2nd level menu item (added as section title) – add any number of menu items (in 3rd level) – those items will be grouped under the same section with title of the 2nd level item
NOTE: custom fields used for creating Mega menus are not imported with XML file- you’ll need to set those manually
Mega menu custom image button:
  • Create 2nd level menu item – under 1st level menu item with checked “Mega menu” checkbox
  • In 2nd level item edit box, under “Custom image”, click on “Upload” button to upload image or select the image from media library
“Post thumb and excerpt” checkbox:
  • Create 2nd level menu item – under 1st level menu item with checked “Mega menu” checkbox

    NOTE: item must be “Posts”, “Products” or “Portfolio”

  • In 2nd level item edit box, check the “Post thumb and excerpt” checkbox.

[/vc_column_text][/vc_column][vc_column width=”1/2″][as_video title=”Creating mega menu” subtitle=”with background image” title_style=”float_left” sub_position=”bellow” subtitle_color=”#dd9933″ no_decoration=”yes” title_size=”262.5%” site=”screenr” id=”Zl6N” w=”100%” h=”350px”][vc_column_text]

“Mega menu new row” checkbox:

After creation of several 2nd level menu sections (and 3rd level menu items inside), it’s possible to shift new menu sections in new row, separated by line. To do that:

  • Create 2nd level menu item – under 1st level menu item with checked “Mega menu” checkbox
  • In 2nd level item edit box, check the “Clear for row” checkbox.
  • Add more 2nd level section with 3rd level menu items (or mega menu images) after item marked “Clear new row).
“Simple clear” checkbox :

2nd level mega menu items are formatted to act as section titles. To override this feature and use them as regular menu items just add simple-clear css class selector in “CSS classes (optional)” menu item field (that field must be enabled in “Screen options” )

“Invisible item” checkbox:

Invisible item (when checked) is acting as a whitespace stretcher, with space width of one regular menu item, to keep uniform layout. Usefull to make mega menu back image not interfere with menu items text (readability)

“Item as section title” checkbox:

When checked, item width will stretch to full, menu item title will be larger and styled as section title

[/vc_column_text][/vc_column][/vc_row]