How to Set up Menus in Jupiter

Updated on January 2, 2019

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.

Creating a menu

1From WordPress left menu, go to Appearance > Menus.

2Click on Create a new menu.

3Add a menu name and click on Create Menu button.

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.

Deleting a Menu Item

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

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

4Click 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.

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

3Repeat these steps for each sub-menu item.

4Click 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

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

Navigation Label

The label for this menu item.

Title Attribute

The title attribute of the the menu item link.

Open link in a new window/tab

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.

Menu Item Icon

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.

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

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.

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

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

3Select 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.
4Click 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.

1From WordPress left menu go to Jupiter > Theme Options > Advanced > Custom CSS.
2Add 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.

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

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

Did this answer your question?