How to add navigation menu on a page
The Navigation Menu element allows you to add a navigation menu anywhere on your website. This element comes really handy when you are building a custom header or footer using Elementor.
Common Uses:
- Header and Footer Navigations
- Sticky Header Navigation
- Secondary Header Navigation inside a page
- Hamburger Menu
Beware! This element is a part of the Jupiter X elements. Jupiter X is exclusively developed by Artbees which represents new useful elements to Elementor. Also, Elementor Pro (Paid version), has another Navigation Menu shortcode, but in order to see the default Elementor Navigation Menu, you need to look for it in the Elementor knowledgebase.
To add a Navigation Menu element to a page:
1. Add a new page or edit an existing one.
2. Click on Edit with Elementor button.
3. From the left dashboard, search for a “Navigation Menu”.
4. Drag and drop the Navigation Menu element to your page.
5. A new dashboard on the left will open with the element’s settings.
6. Edit the settings and Update the page.
Exceptions and logical conditions
Since Jupiter X 1.3 there is an option in the Navigation Menu element which lets you add logic to your navigation menu. This feature is mainly developed to let users show different menus for different conditions such as Logged In and Logged Out users, different access levels and etc.
The good thing about this feature is that you can add multiple conditions to one menu. It will help you customize your navigation even more. For example, using multiple exception rules you can choose to have a completely different menu for all of your 10 (I.E) user roles.
However, using multiple exceptions for a menu could be a little bit tricky. You should avoid covering multiple exception rules for your menu. What will happen to your menu, when you select two different menus for one user role? This logical issue is something that you should avoid as much as you can otherwise you will think that the menu is not working properly. In such cases when multiple rules are covering each other, the first rule will only get executed and others will be ignored.
More examples of possible cases which can cause logical problems:
– If a user adds 2 different menus with the same exception (For example “Everyone”)
– If a user adds an exception for all the Logged In users and a different exception for Everyone.
Responsive Options
You can choose to have different settings on different screen sizes for some of the Navigation Menu element options. Whenever you see this icon, it means that you can choose the different screen sizes and freely change those options for your specific resolution.
At first, you’ll see the icon for desktop layout only
But when you click that icon, you’ll get two more layouts: for tablet and phone.
To learn more about it, please check this article.
If you want to change the breakpoint for a burger menu, refer to this article.
Note: If you want to create a custom header and add Navigation Menu to it, refer to this article on how to create a custom header in Elementor.
Note: If you want to create a custom footer and add Navigation Menu to it, refer to this article how to create a custom footer in Elementor.
Note: There are some basic Mega Menu features in the Jupiter X theme, but you can use JetMenu (bundled) or UberMenu plugin to create a menu you wish. The plugin is fully compatible with the theme.
Note: There is a possibility to create a side navigation menu (vertical menu) using the Navigation Menu element. Read the Creating Side Navigation article to find more.
