When previewing Eaven theme demo sites, you may see that when you hover the mouse over a menu item, a full-width drop-down menu with several posts appears. Like shown in this screenshot:
This is a navigation item that enables the Mega Menu effect.
What is Mega Menu?
“A mega menu is typically defined as a drop down interface that is triggered by the user hovering over a link or defined area. This dropdown usually shows all options in one main, mega-panel and oftentimes groups related topics into categories.”
In short, it is a full-width dropdown menu in a navigation bar.
In Eaven theme, the Primary Menu supports mega menu. And you can show 2 types of mega menus:
- Display at most 4 recent posts of a category. Or, if the category item is a parent category that has several sub categories, then in the mega menu it will display at most 3 recent posts of each (sub) category, and a list of sub categories.
- Display sub nav items in 5 columns.
Set up the mega menu:
- Go to Appearance > Menus, make sure you are editing the primary menu.
- Click on Screen Options button located on the top right corner.
- Tick the box of CSS Classes.
- To display posts of a category in the menu, add a category into the menu.
- Then click on the category item in the menu, enter mega-menu into CSS Classes field.
- To display sub nav items in columns, just add items into the primary menu, drag and drop to create multi-level menus, then click on the parent item, enter mega-menu into CSS Classes field.