How to Create a Menu in Jupiter X (Using Advanced Menu)

Introduction

The Advanced Menu widget in Jupiter X allows you to create a fully customizable and responsive menu directly within the widget itself, without needing to set up a menu in WordPress’s Appearance > Menus section. This widget provides flexibility and control over your navigation structure. In this guide, you'll learn how to create and customize a menu using the Advanced Menu widget in Jupiter X.

Step 1: Enable the Advanced Menu Widget

Before using the Advanced Menu widget, make sure it is enabled in Elementor.

1. Go to your WordPress dashboard
2. Navigate to Jupiter X > Settings > Elementor
3. Scroll down and ensure the Advanced Menu widget is enabled

Step 2: Add the Advanced Menu Widget in Elementor

1. Open the page or header template in Elementor

   Drag and drop the Advanced Menu widget into your header section

   In the Content tab:

   • Click on Add Item to create a new menu item (and sub-menus if any)
   • Set the title and link, icon for each item
   • Use the Sub Items feature to create sub-menus
   • Arrange menu items by dragging them into position

Step 3: Customize the Menu

The Advanced Menu widget allows you to style the menu to match your website’s design.

Content > Layout

• Layout: Choose between Horizontal, Vertical, Dropdown or Off-Canvas
• 'Show Sub-Menu On' Behavior: Set how submenu items open (Hover or Click)
• Mobile Breakpoint: Define when the menu switches to a mobile-friendly layout
• Define Animations and Hover Effects

Style

• Typography: Adjust font, size, weight, and color for menu and sub-menu items
• Background & Borders: Customize menu and submenu backgrounds
• Spacing & Padding: Control spacing between menu items

To learn more about customization options, see Advanced Menu Widget

Step 4: Optimize for Mobile

• Preview the menu on mobile viewport by clicking on the mobile icon on the top bar in Elementor.
• Use Style > Dropdown and Style > Dropdown Toggle button to customize the menu appearance on mobile

Step 6: Save and Publish

Once you’ve customized the menu:

1. Click Update/Publish in Elementor
2. Preview your menu to ensure it works properly
3. Test it on different devices to check responsiveness

Related Article: How to Create a Sticky Header

Conclusion

The Advanced Menu widget in Jupiter X makes it easy to create a professional-looking menu with full customization options directly inside Elementor, without needing to configure WordPress's native menu system. By following these steps, you can design a beautiful and functional navigation menu tailored to your website’s needs.

Need help? Create a support ticket for further assistance!