How to Set up Menus in Jupiter

Last Updated on

Jupiter uses WordPress built-in Menus feature which can be found in your WordPress dashboard > Appearance > Menus which is the key point to set up menus in Jupiter. In this section we will go by explaining every detail regarding usage of below tools as well as some other cool features we added such as making a mega menu and using 400+ icons for your Menu items.

Note: Header builder is introduced in Jupiter to make amazing headers. The way you put menu in header builder is different. For more information check out this article.

In this article

Creating a menu

Note: If you want to create One Page Menu, the article How To Create One-Page Website will help you.
From WordPress left menu, go to Appearance > Menus.

Click on Create a new menu.

Add a menu name and click on Create Menu button.

Note: Your new custom menu has now been defined, and you are ready to drag and drop menu items.

Adding Items to the Menu

The Screen Options allows you to choose which items you can use to add to a menu. Certain items like Posts are hidden by default. If you have not seen it already, it appears on the right side of the WordPress back-end header. If you click on Screen Options, it will slide down, and you can easily check items to hide or show.

Set up menus Jupiter - Screen Options

  1. These panes will allow you to drop any sort of item into your menu. You can build from custom links to post, pages or categories.
  2. To add any of those options as a menu item, select the item and click on the Add to Menu button. After a moment, you will see the item appear on your menu’s visual editing canvas.

Please remember you should always save your changes by clicking on Save Menu, which can be found on the right of the header and footer sections.

Note: Sometimes the menu items are too much so the WordPress can not handle it. In these cases, we recommend you to increase the max_input_vars in the PHP using this article:

Deleting a Menu Item

Locate the menu item which you want to remove in the menu editor window.
Click on the arrow icon in the top right-hand corner of the menu item/box to expand it.

Click on the Remove link. The menu item/box will be immediately removed.

Click the Save Menu button to save your changes.

Creating Multi-level Menus

When planning the structure of your menu, it helps to think of each menu item as a heading in a formal report document. In a formal report, main section headings (Level 1 headings) are the nearest to the left of the page, sub-section headings (Level 2 headings) are indented slightly further to the right and any other subordinate headings (Level 3) within the same section are indented incrementally further to the right. The WordPress menu editor allows you to create Multi-level menus using a simple drag and drop interface. Drag menu items up or down to change their order of appearance in the menu. Drag menu items left or right in order to create sub-levels within your menu. To make one menu item a subordinate of another, you need to position the ‘child’ underneath its ‘parent’ and then drag it slightly to the right.

Position the mouse over the ‘child’ menu item.
Drag that item to the right.

Repeat these steps for each sub-menu item.

Click the Save Menu button in the Menu Editor to save your changes.

Adding Menu to Your Site

If you have created your navigation, in order to display them on the front-end of your web page, you should assign your menus to specified locations accordingly. If you have selected this navigation as your main navigation in header, then you just need to check the Primary Navigation option. You have the option to assign the current menu to one of the Navigation Locations available for you through Jupiter.

Set up menus in Jupiter - Menu Settings

Note: Please consider that Jupiter does not support multiple menus in one page. Menu locations mentioned above is a way to decide which menu to show in the page, not adding additional menu location to same page. Menu is positioned at the top of the page in Jupiter and that can not be changed.
Note: There is a useful feature Auto add pages under Menu Settings section. If checked, new pages will be added automatically to the menu when you create them, and no need to add each page manually after creation.

Options Available for Each Menu Item

Jupiter provides different options for each menu item which you drag and drop on the menu canvas. Here is a list with a description of each section:

Set up Menus in Jupiter - Menu Item Settings

The label for this menu item.

Title Attribute

The title attribute of the the menu item link.

This is an option available for you by default in WordPress. In some cases you may wish to hide this option, to make it available you need to click on the Screen Options button at the top right of the Menu Editing screen and enable it from there. Enable this option if you want to open the menu link in new browser window or tab.

CSS Classes (optional)

By using this option, you can add custom CSS class to the menu. It can be helpful when you need to add specific styles to this menu item.

Use this option to add an icon for your menu item. You need to add the proper class for icon. Please go to Main Dashboard Menu > Jupiter > Control Panel > Icon Library to search for your desired icon and find the proper class to add in this option.

Make this Item Mega Menu?

This options will turn the current menu item into a Mega Menu container. For more details information about mega menus, please click here.

Note: If you can not see the extra menu fields such as CSS class or Description, you may enable them from the top bar Screen Options.

If you have any questions regarding the menu set up, please contact our support team creating a ticket via Artbees Dashboard.

Note: To learn how to style the menu, check out this article.

Setting a different menu on a specific page

Jupiter uses WordPress built-in Menus feature which can be found in your WordPress dashboard > Appearance > Menus which is the key point to set up menus in Jupiter.
You can add menu to your site globally as described in this article in “Adding Menu to your site” section. But if you want to assign different navigation on a different page, there is an option you can use.

Create a new menu in WordPress dashboard > Appearance > Menus.
Scroll to the bottom and assign your new menu to one of the “Display Locations” under Menu Settings section (from Second Navigation to Tenth Navigation).
Save the changes.
Go to Pages and edit a page where you want to assign a custom menu.
Scroll down to Jupiter Page Options section and you’ll find the last option Main Navigation Location.
Select the menu location you set in the second step.
Publish the changes.

Check the page and you’ll see it has another menu than other pages.

Styling a Specific Menu Item

If you want to style some menu item differently, you need assign a custom class name for it. Follow the steps below:

From WordPress left menu go to Appearance > Menus.
From the Screen Options menu at the top, tick CSS Classes option.

Select the menu which you want to edit and open the menu item to which you want to assign a custom class name and add any class name in CSS Classes field.
Click on Save Menu button.

Once the class assigned, you can apply custom css code for that menu item.  Let’s say you want to change font color for it.

You need add custom css code using your custom class name.

From WordPress left menu go to Jupiter > Theme Options > Advanced > Custom CSS.
Add this css code in Custom CSS section:
.custom-item a {
    color: red !important;

Where .custom-item is your custom css class assigned to the menu item in Appearance > Menus.

Don’t miss the dot at the beginning of the class name in your code.

Change color value to any you want.

Click on Save Settings button.
Check the changes on the frontend.

Your menu item should differ from other items in the menu now.

Was this helpful?
Previous Article:
Next Article:

Can't find what you're looking for?

Open New Ticket