How to display posts of a category in menu (mega menu)

How to display posts of a category in menu (mega menu)

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:

  1. Go to Appearance > Menus, make sure you are editing the primary menu.
  2. Click on Screen Options button located on the top right corner.
  3. Tick the box of CSS Classes.
  4. To display posts of a category in the menu, add a category into the menu.
  5. Then click on the category item in the menu, enter mega-menu into CSS Classes field.
  6. 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.