Building Megamenu Dropdown
Vodi supports Megamenu Dropdown, with the help of plugins that comes bundled with the theme namely : MAS Static Content plugin.
1. Static Content Post Type
A megamenu item in Vodi theme is a Static Content This Static Content is available on activating MAS Static Content Plugin.
2. Add a new megamenu item
- Navigate to Static Content > Add New.
- Give it a title, lets say “Pages Megamenu” item. The title is not used anywhere in displaying the menu.
- Click on Add block. It will display Gutenberg blocks choose the coumns and add the Custom Html block inside the coulms.
- Let us add a simple text block. Click on Add text block button and the result will look like this.
- Columns counts are configure right settings.
- Click on Publish button.
3. Adding megamenu item as a submenu to a menu item
- Navigate to Appearance > Menus.
- On top right corner of your screen, you will find a dropdown menu Screen Options. Click on it.
- 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.
- Choose the menu you want to edit. In my case I’ve chose a menu that is hooked to Primary Menu (Header v1) location.
- Now check the Pages Megamenu item and click on Add to menu.
- Drag the Pages Megamenu box and drop it under any existing menu as a submenu.
- Click on Save Menu.
- Now the megamenu will is added as a submenu.
4. A complex Megamenu Item
We built our simple Megamenu in previous section. We are now going to build a little complex mega menu using Gutenberg.
1. The Grid
- Our Complex Megamenu item will now have 2 columns.
- First Column is custom html and second column is TV Show Carousel Block.
TV Show Megamenu
Settings
TV Show Carousel Block Settings
TV Show Carousel Block Output
Movies Megamenu
Settings
Movie Block Settings
Movies Carousel Settings
Output
Pages Megamenu
Settings
Output
