How to Create a Menu Similar to JetMenu Live Demo
From this tutorial, you’ll find out how to recreate a menu similar to the one represented in the live demo with the JetMenu plugin.
The templates are stored in .json format in the dummy-data folder that’s located in the JetMenu plugin’s directory.
Preparing Menu
First, let’s create a custom menu with the same items that a menu on a live demo has. For this purpose, open the WordPress Dashboard and browse the Appearance > Menus tab. Here, click the Create a new menu option, provide your new menu with a title, click the Create Menu button and apply it to the needed location (e.g., Main).
Proceed to the Customs Links block and add customs links or pages to a menu. Here fill in the needed URL and Link text for each of the items to add labels and links. Then click Add to Menu button to add a new item to your menu. You can add as many items as you need.
Afterward, click the Save Menu button to save changes.
Importing JetMenu Styles
Then navigate to the JetMenu block in WordPress Dashboard.
Click the Import button at the bottom of the page and browse the options.json file in your jetmenu/dummy-data directory.
Click the Go button to proceed. Then, after the page is refreshed, hit Save button to save the changes.
Importing MegaMenu Items
Go back to the Appearance > Menus tab. Here select the custom menu you’ve recently created and make sure you’ve enabled Enable JetMenu for current location option. After that, click the Save button to allow JetMenu to be applied to the menu you’ve created.
Hover over one of the items and click JetMenu label to access JetMenu settings for this item.
Turn on Mega Submenu Enabled option and click Edit Mega Menu Item Content button to open the Elementor editor.
Click the Add Template option (it’s located on the right from all the other options), and find Import Template option. Click it and browse the needed .json file you want to use as a mega menu (e.g., content-portfolio.json file stands for the mega menu item that contains the portfolio on the live demo).
After the file is imported, find it at the very bottom of the files list and click the Insert option to insert it into the page.
Now you can see how the imported template of the mega menu item looks. Click the Update button to save the changes. Then hit the Back arrow to return to editing the menu. Don’t forget to click the Save button to save the changes you’ve made.
Open your website and view the results. The menu you’ve created should have style settings similar to the ones used on the live demo.
The process of importing dummy data is fast and efficient and allows you to head-start when you only learn the basic things about the JetMenu plugin.