Setting Up and Editing Wordpress Menu

Your website’s navigation is the backbone of your user experience. It is the pathway and signposts your users follow to explore the content on your site.

At Arts Cubed, we build modern WordPress sites, most often using the powerful Jupiter X theme and combining the flexible Elementor page builder which leaves you, the user, with an easy and efficient way to manage your menus from the basic WordPress interface.

However, unlike the classic WordPress approach, Jupiter X and Elementor combine to give you precise visual control over where your menu appears and how it looks. This guide will walk you through the two main steps: creating the menu in WordPress and then displaying and styling it with Elementor.

1. Creating the Menu (The WordPress Way)

In Jupiter X, the actual menu structure (which links go where) is managed in the standard WordPress dashboard.

Log in to your WordPress admin area.
In the left-hand sidebar, hover over Appearance and click on Menus.
If you don’t have a menu, click the Create a new menu link.
Give your menu a clear name (e.g., “Primary Navigation”) and click Create Menu.
In the Add menu items box on the left, select and add the pages, posts, custom links, or categories you want to include.
Use the drag-and-drop interface in the Menu Structure section to reorder items and create sub-menus (dropdowns) by dragging items slightly to the right of their parent.
Click Save Menu.

Note: With Jupiter X and Elementor, you do not need to assign a “Display location” in the Menu Settings section. Elementor will handle placement.

2. Displaying the Menu (The Elementor Way)

In Jupiter X, your header and footer are typically built using Elementor templates. To add or edit your menu, you’ll need to create or edit the relevant template.

A. Editing the Header Template

From your WordPress dashboard, navigate to Elementor > Templates.
Find the template used for your site’s header (it might be named “Header,” “Primary Header,” or similar) and click Edit with Elementor.
If you do not yet have a header template, you can create a new one and the easiest is to start with a pre-built template
Once the Elementor editor loads, you’ll see your starting header design.

B. Adding or Modifying the Navigation Menu Widget

To edit and style the menu, Jupiter X and Elementor provide dedicated widgets for your header design including

Logo
Navigation menu
Search form
Social tools

To add the menu:

In the Elementor panel, search for the Navigation Menu widget.
Drag and drop the widget into the desired location in your header.
In the widget settings under Content > Menu, select the menu you created in Step 1 (e.g., “Primary Navigation”) from the dropdown list.

C. Styling the Menu

This is where Elementor’s power shines. Once the widget is in place, use the Style tab to customize every aspect of your menu’s appearance from fonts to backgrounds including hover and active modes:

Typography: Set the font, size, weight, and style for the menu text.
Text Color: Define colors for the normal, hover, and active states of the links.
Pointers: Add and style hover effects like underlines, frames, or backgrounds.
Dropdown: Separately style the background, text, and divider lines for sub-menus.

A screenshot of the Elementor ‘Style’ tab for the Navigation Menu widget, showing options for typography and color.

3. Saving and Going Live

After making your changes in Elementor:

Click the Publish button at the top of the Elementor panel to save the template.
Your new or edited menu is now ready to go live on all pages using that header template.
If you are using Simplicity Mode in Jupiter X, your heading is now live on all, or chosen, pages on your site
If you are using Jupiter X’s native theme styling panel, navigate to Jupiter X, styles and Header. From the dropdown menu in Custom Header select your newly created header template.

By combining the structural simplicity of the WordPress Menus screen with the visual flexibility of Elementor in Jupiter X, you have complete control over your website’s navigation.