Even if you aren’t a WordPress expert you can easily tell what a Website Menu looks like. Many Websites place the menu at the footer panel and others place it inside their Header. Whatever the position of the Menu maybe, it’s the most widely used navigation mechanism for any WordPress Website.
WordPress Menus work as the blueprint for your Website. It is that manual that your site visitors will use to navigate through your website. Also, the Menu of a Website gives site-visitors an idea about what sections the Website includes.
Traditionally the Menu of a Website was part of the Theme that it ran. But if you are running Elementor, you don’t need to rely much on a Theme. Nav Menu widget in Elementor lets you create Menus for your Website easily.
Nav Menu Widget in Elementor
Now the first thing you need to do before using the Nav Menu element in Elementor is, set the Elementor Page layout to either Elementor Canvas or Elementor Full-Width. Why? If you keep the Default layout while using the Nav Menu element, you will probably end up creating a page that has two Menus inside it. That’s not what you want to do, do you? Once you set the layout to Full-Width or Canvas you get a complete blank Editor that does not include the default Header section of your Website.
After you set the layout open your Elementor Dashboard and search for the Nav Menu Widget. The first thing you need to do is set the source of your Menu. From the Menu, drop-down pick a menu from the available menus on your Website. Once you are done picking the Menu for your page, set its alignment and layout.
Adjusting the Styling
Before moving on to the Styling Tab, remember to add an appropriate Pointer, Animation and Sub-Menu Indicator for the Menu. The Pointer will only activate once your site-visitors hover their mouse over them. You probably have a Sub-Menu inside the Main Menu. Pick a style for the Sub-Menu indicator.
The very last option under the Layout Tab is adjusting the Menu for a Mobile device. Switch to the Mobile Responsive Mode while you are adjusting the Mobile Drop-Down. If you keep the Full-Width toggle turned off, the Sub-Menu will force the section to extend when it is active. However, if you toggle it on, the Sub-Menu will hover over the section below it.
If you have been using Elementor for a while now, you already know Elementor gives you limitless customization options. It is true for the Nav Menu element as well. In fact, you can set three different Style for the Nav Menu element, whereas other elements can have two different style set-ups – Normal and Hover. In addition to having both the Normal and Hover style set-up options, you can also have an Active style setup for your Nav Menu.
The only rule for having three different sets of styling for three different states is, picking colors in the right contrast. Otherwise, there is no point in using three different styling sets. This is true for both the Text and Pointer color. This means you need to pick three different pairs of color for the three states. You can build pairs by including a lighter and darker shade of a base color and making sure the base color is different for the three states.
Any changes you make inside the Drop-Down Tab will affect the sub-menu on Desktop. And on mobile, this will affect the entire menu as drop-down is the built-in style for Mobile devices. Similar to the Main Menu you can set three different styling for the Drop-Down menu.
Wrapping Up!
If you intend to use the Menu that you just created using Elementor across your entire Website, you need to save it as a Global Widget. After you set it as the Global Widget, one you make any changes to the original file, it will be updated on every page that it has been used inside. But make sure, you set either Elementor Canvas or Full-Width layout for every page you create with Elementor afterward. Otherwise, you will end up creating pages with the default Menu that comes with the theme and the one that you created with Elementor.
