Navigation Menu Element

Last Updated on

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
x
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

In this article


Displaying a Navigation Menu Element

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. These are explained below.

Content

SettingDescription
Menu Select a menu which you premade in WordPress Appearance > Menus screen.
Layout Select your navigation layout.
Center Logo If enabled, the logo will be centered while the menu items will be on the left and right.
Mobile Full Width Stretches the mobile menu to full width.
Break Point This is the tricky part. In case you want to show the menu, always in the Burger style, simply set it’s breakpoint to Desktop & Laptop. Otherwise choose the Mobile or Tablet.
Mobile Menu Layout Choose a navigation layout for mobile devices.

Adding a Navigation Menu Inside Header

To add a navigation menu inside the header:

1
From the WordPress left menu, click on Elementor.

2
Next to My Templates title, click on the Add New button.

3
For the template type select Header and give your header a name.

4
Click on the Create Template button.
5
Follow the “Displaying a Navigation Menu Element” section in this article to simply add the navigation menu to your newly created header.
6
Assign the header to your page by following this article.

Simply follow the section above called “Adding a Navigation Menu Inside Header“, but on step 3, for the template type select Footer.


Adding a Burger Menu

Simply follow the section above called “Displaying a Navigation Menu Element“, but choose the breakpoint to Desktops & Laptop.


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

Was this helpful?
Previous Article:
Next Article:

Can't find what you're looking for?

Open New Ticket