Every website has featured content. One of ways to let your visitors know about your site’s featured content is by displaying it on the menu as menu is one of the most visible parts of a website. You can create a mega menu to display featured content.
Since WordPress has no default feature to create a mega menu, you need to install a plugin. One of the menu plugins you can use to create a mega menu is JetMenu.
JetMenu is a great menu plugin to create a mega menu on a WordPress site. You can add any element to your mega menu content, including blog posts. JetMenu is technically an Elementor add-on so to be able to use it, you need to install and activate Elementor as well on your WordPress site. JetMenu makes use of the Elementor intuitive editor to edit the mega menu content.
How to Display Blog Posts on WordPress Menu Using JetMenu
Before getting started, here are the components you need to create a mega menu using JetMenu to display blog posts.
- JetMenu
- Elementor
- An Elementor widget to display blog posts
- An Elementor add-on to create a custom header
JetMenu itself is a paid plugin. You need to spend $24 per year yo use it. You can get it on its official site. What about Elementor?
You can actually use the free version of Elementor, but we strongly recommend you to use Elementor Pro as Elementor Pro comes with a widget to display blog posts and a Theme Builder feature to create a custom header.
We will assume that you already know how to create a menu in WordPress before we get started. If you don’t know yet, you can read our article here.
Step 1: Create the Custom Header Template
Once installed and activated, JetMenu adds three widgets to your Elementor:
- Mega Menu
- Vertical Mega Menu
- Hamburger Menu
You need to create a custom header to place the Mega Menu widget (or Vertical Mega Menu widget if you want to create a vertical mega menu). As mentioned, we will use Elementor Pro to create a custom header in this example.
To create a custom header with Elementor Pro, go to Templates -> Theme Builder on your WordPress dashboard. Click the Header tab, followed by the Add New button on the top side to create a new header template. Or, if you want to use Elementor 3.0 new Theme Builder feature, you can click the Try It Now button.
Make sure the template type is set to Header then give your template a name and click the CREATE TEMPLATE button to start creating the template.
There are over 20 premade header templates you can choose from. Simply select the one you like and click the INSERT button to import it. Or, if you want to create the header template from scratch you can simply close the template library.
Drag the Mega Menu widget to the header section.
Go to the left panel and select the menu you want to use on the Select Menu for Desktop option. To select a menu for mobile devices, you can select one on the Select Menu for Mobile option.
To style up the menu, you can go to the Style tab on the left panel. From this tab, you can set things like the menu container background, the text color, typography, and so on.
Once you are done editing the template, you can click the PUBLISH button.
You will be asked to add a display condition. Simply click the ADD CONDITION button to add one. By default, your header template will be applied to the entire website. So, if you want it to be applied to the entire website, you can simply click the SAVE & CLOSE after clicking the ADD CONDITION button. If you want the template to be applied to a certain page only, you can select the page from the dropdown menu.
Step 2: Edit the Mega Menu Content
Once your header template is done, the next step is to edit the mega menu content. To start doing so, go to Appearance -> Menus on your WordPress dashboard. On the Add menu items panel, enable the Enable JetMenu for current location option on the Primary menu section.
Switch to the Menu structure panel. Select a menu item you want to display the blog posts on and click the JetMenu button to edit the content.
Enable the Mega submenu enabled option and click the Edit Mega Menu Item Content button to open the Elementor editor where you can edit the content.
You can any element you like by simply dragging the widgets from the left panel to the canvas area. To add blog posts, you can use a widget designed to display blog posts. On Elementor Pro, you can use the Posts widget.
After dragging the Posts widget to the canvas area, you can go to the left panel to set the query and style it up. You can read this article to learn more about how to use the Posts widget of Elementor. In addition to blog posts, you can also add other elements to your liking to the mega menu content.
Again, you can simply drag the widgets you like from the left panel and drop them to the canvas area. Once done editing the menu item content, click the UPDATE button followed by the X icon on the top-right corner to close the Elementor editor.
You will be returned back to the mega menu window. Click the Save button to apply the changes you have just made and click the X icon on the top-right corner to close the window. Or, if you want to add elements like badge and icon the menu item, you can simply click the items on the left panel.
To add blog posts (or other elements such as WooCommerce products, contact form, etc) to other menu items, you can repeat the steps we have just covered.
You can actually also enable the mega menu to sub-menu items. However, content for sub-menu items available only for the mobile view on the current version of JetMenu (version 2.0.5).
