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.
- Header and Footer Navigations
- Sticky Header Navigation
- Secondary Header Navigation inside a page
- Hamburger Menu
Beware! This element is a part of the Raven elements. Raven is an exclusive plugin 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.
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 different screen size and freely change that 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 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 is possibility to create a side navigation menu (vertical menu) using Navigation Menu element. Read the Creating Side Navigation article to find more.