Creating Megamenus

Building Megamenu Dropdown

Tokoo supports Megamenu Dropdown, with the help of two plugins that comes bundled with the theme namely : King Composer “or” Elementor plugin and Tokoo Extensions plugin.

1. Static Block Post Type

A megamenu item in Tokoo theme is a Static Block. This Static Block is available on activating Tokoo Extensions Plugin.

2. Enable King Composer for Static Block

  • Navigate to Settings > King Composer.
  • In Supported Content Types: under General Settings tab , make sure static_block is checked.

  • Go to Static Content > Add New and make sure it has a button just below the title with King composer icon and text that reads Edit with KingComposer.

3. Add a new megamenu item

    1. Navigate to Static Content > Add New.
    2. Give it a title, lets say “Pages Megamenu” item. The title is not used anywhere in displaying the menu.
    3. Click on Edit with KingComposer. It will display King Composer Backend Editor. We will use this back end editor to build our megamenu item.

 

    1. Let us add a simple text block. Click on Add text block button and the result will look like this.

 

  1. Click on Publish button.

4. Adding megamenu item as a submenu to a menu item

    1. Navigate to Appearance > Menus.
    2. On top right corner of your screen, you will find a dropdown menu Screen Options. Click on it.
    3. In the dropdown that appears, check on Static Content Blocks under Show on screen. You will now see Static Content Blocks listed in the left side.

 

    1. Choose the menu you want to edit. In my case I’ve chose a menu that is hooked to Primary Menu location.
    2. Now check the pages Megamenu item and click on Add to menu.
    3. Drag the Pages Megamenu box and drop it under any existing menu as a submenu.

 

  1. Click on Save Menu.
  2. Now the megamenu will is added as a submenu.

Advanced Megamenu Dropdown

We built our simple Megamenu in previous section. We are now going to build a little complex mega menu using King Composer.

Revisiting Test Megamenu Item Static Block

  • Navigate to Static Content > Static Blocks.
  • It should display the “Pages Megamenu” that we created from previous section.
  • Click on edit and you should see an existing text block.
  • Delete the text edit block by hovering over the block and clicking on the button which has the trash icon.

A complex Megamenu Item

1. The Grid

  • Our Complex Megamenu item will now have 4 columns.
  • We will select a predefined column which is 25% + 25% + 25% + 25%.
  • The four column grid layout will look like this :

2. Populating the Grid

  • King Composer comes with lot of elements that can be added to the Grid.

Row 1 has 4 columns.

  • Column 1 – Click on the Add Elements text. It should popup Add Elements screen. Let us add Navigation Menu widget under Widgets. I have already created a menu (via Appearance > Menus).
    • Widget Title :
    • Menu : Pages Menu #1 ( name of the menu created already)
  • Column 2 – Click on the Add Elements text. It should popup Add Elements screen. Let us add Navigation Menu widget under Widgets. I have already created a menu (via Appearance > Menus).
    • Widget Title :
    • Menu : Pages Menu #2 ( name of the menu created already)
  • Column 3 – Click on the Add Elements text. It should popup Add Elements screen. Let us add Navigation Menu widget under Widgets. I have already created a menu (via Appearance > Menus).
    • Widget Title :
    • Menu : Pages Menu #3 ( name of the menu created already)
  • Column 4 – Click on the Add Elements text. It should popup Add Elements screen. Let us add Navigation Menu widget under Widgets. I have already created a menu (via Appearance > Menus).
    • Widget Title :
    • Menu : Pages Menu #4 ( name of the menu created already)

3. How does the Grid look after populating ?

A complex Megamenu Item With Elementor

1. The Grid

  • Our Complex Megamenu item will now have 4 columns.
  • We will select a predefined column which is 25% + 25% + 25% + 25%.
  • The four column grid layout will look like this :

2. Populating the Grid

  • Elementor comes with lot of elements that can be added to the Grid.

Row 1 has 4 columns.

  • Column 1 – Click on the Add Elements text. It should popup Add Elements screen. Let us add Navigation Menu widget under Widgets. I have already created a menu (via Appearance > Menus).
    • Widget Title :
    • Menu : Pages Menu #1 ( name of the menu created already)
  • Column 2 – Click on the Add Elements text. It should popup Add Elements screen. Let us add Navigation Menu widget under Widgets. I have already created a menu (via Appearance > Menus).
    • Widget Title :
    • Menu : Pages Menu #2 ( name of the menu created already)
  • Column 3 – Click on the Add Elements text. It should popup Add Elements screen. Let us add Navigation Menu widget under Widgets. I have already created a menu (via Appearance > Menus).
    • Widget Title :
    • Menu : Pages Menu #3 ( name of the menu created already)
  • Column 4 – Click on the Add Elements text. It should popup Add Elements screen. Let us add Navigation Menu widget under Widgets. I have already created a menu (via Appearance > Menus).
    • Widget Title :
    • Menu : Pages Menu #4 ( name of the menu created already)

3. The single navigation menu setting look like this :

Not quite what you are looking for ? Get Help