{"id":26,"date":"2019-09-21T03:43:20","date_gmt":"2019-09-21T03:43:20","guid":{"rendered":"https:\/\/www.loftocean.com\/eaven\/?p=26"},"modified":"2019-11-04T03:44:12","modified_gmt":"2019-11-04T03:44:12","slug":"how-to-display-posts-of-a-category-in-menu-mega-menu","status":"publish","type":"post","link":"https:\/\/www.loftocean.com\/eaven\/start\/how-to-display-posts-of-a-category-in-menu-mega-menu\/","title":{"rendered":"How to display posts of a category in menu (mega menu)"},"content":{"rendered":"

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:<\/p>\n

\"\"<\/p>\n

This is a navigation item that enables the Mega Menu<\/strong> effect.<\/p>\n

\n

What is Mega Menu?<\/strong><\/p>\n

“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.”<\/p>\n

In short, it is a full-width dropdown menu in a navigation bar.<\/p>\n<\/div>\n

\n

In Eaven theme, the Primary Menu<\/strong> supports mega menu. And you can show 2 types of mega menus:<\/p>\n

    \n
  • 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.
    \n\"\"<\/li>\n
  • Display sub nav items in 5 columns.<\/li>\n<\/ul>\n
    \n

    Set up the mega menu:<\/strong><\/p>\n

      \n
    1. Go to Appearance<\/strong> > Menus<\/strong>, make sure you are editing the primary menu.<\/li>\n
    2. Click on Screen Options<\/strong> button located on the top right corner.<\/li>\n
    3. Tick the box of CSS Classes<\/strong>.
      \n\"\"<\/li>\n
    4. To display posts of a category in the menu, add a category into the menu.
      \n\"\"<\/li>\n
    5. Then click on the category item in the menu, enter mega-menu<\/span> into CSS Classes<\/strong> field.
      \n\"\"<\/li>\n
    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<\/span> into CSS Classes<\/strong> field.
      \n\"\"<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"

      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 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[],"class_list":["post-26","post","type-post","status-publish","format-standard","hentry","category-start"],"_links":{"self":[{"href":"https:\/\/www.loftocean.com\/eaven\/wp-json\/wp\/v2\/posts\/26","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.loftocean.com\/eaven\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.loftocean.com\/eaven\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.loftocean.com\/eaven\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.loftocean.com\/eaven\/wp-json\/wp\/v2\/comments?post=26"}],"version-history":[{"count":5,"href":"https:\/\/www.loftocean.com\/eaven\/wp-json\/wp\/v2\/posts\/26\/revisions"}],"predecessor-version":[{"id":67,"href":"https:\/\/www.loftocean.com\/eaven\/wp-json\/wp\/v2\/posts\/26\/revisions\/67"}],"wp:attachment":[{"href":"https:\/\/www.loftocean.com\/eaven\/wp-json\/wp\/v2\/media?parent=26"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.loftocean.com\/eaven\/wp-json\/wp\/v2\/categories?post=26"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.loftocean.com\/eaven\/wp-json\/wp\/v2\/tags?post=26"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}