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
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.
- 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.
- 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
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.
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.
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:
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.
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:
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.
.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.
Your menu item should differ from other items in the menu now.
