Nav Menu
How to Configure and Style Nav Menu #
Nav Menu Widget Elementor lets you display the navigation menu of your site at any place of your site instantly. It makes navigation very much user-friendly & gives you the freedom to place it at any certain section of your website. As a result, this element can massively improve the user experience for your website.
How to Create a Menu #
First of all, make sure that you had already created a Menu to use it on Nav Menu. To create a menu, simply go to your WordPress Dashboard. Then navigate to wp-admin -> Appearance -> Menus.
You can simply use its drag & drop facility to create a Menu & save it.
How to Activate Nav Menu #
To use this Sastra Addons element, find the ‘Nav Menu‘ element from the Search option under the ‘ELEMENTS‘ tab.
Simply just Drag & Drop the ‘Nav Menu’ into the ‘Drag widget here‘ or the ‘+’ section.
After you are successfully done with this step, this is how the element is going to look like.
How to Configure the Content Settings #
Under the ‘Content’ tab, you will find the ‘Menu’, ‘Menu Items’ & ‘Mobile Menu’ section.
Menu #
From this section, you can choose a ‘Menu’ out of which you have created on your website. Besides, you can use the drop-down menu to choose your preferred Layout as well. By default, it is set to ‘Horizontal’ layout. Also you can align menu with supported all devices.
Menu Items #
From this section, you can choose a hover effect, hover animation and transition duration. Besides, you can use the drop-down menu to choose your preferred sub menu icon, sub menu display action and sub menu entrance well.
Mobile Menu #
From this section, you can use the drop-down menu to choose when open mobile menu. You can also change mobile menu width and items alignment as well.
Besides, you can change the toggle button icon, use the drop-down menu to choose your preferred toggle icon and alignment with responsive option.
Click to see Live Demo #
How to Style Nav Menu #
Switch to the ‘Style’ tab to style all the features of Nav Menu.
Menu Items #
From the ‘Menu Items’ section, you can change the text color with hovered and normal options, in hovered option you can also set pointer color. You can use toggle for highlight active item, also change sub menu icon size, pointer height, typography and pointer height.
Besides, you can change the inner and outer horizontal spacing and vertical spacing supported in all devices. Moreover, you can add styling to the Border as well.
Sub Menu #
From the ‘Sub Menu’ section, you can change the text color and background color with hovered and normal options. You can use toggle for enable / disable item divider, if item divider is enable then you can change divider color and divider height as well.
Besides, you can change the horizontal and vertical padding and sub menu offset supported in all devices. Moreover, you can change typography, add styling to the Box shadow and Border as well.
Mobile Menu #
From the ‘Mobile Menu’ section, you can change the text color and background color with focus and normal options. You can use toggle for highlight active item, item divider, if item divider is enable then you can change divider color and divider height as well.
Besides, you can change the item horizontal and item vertical spacing, sub item font size, sub item vertical spacing and dropdown offset supported in all devices as well.
Toggle Button #
From the ‘Toggle Button’ section, you can change the color and background color with hovered and normal options. You can change the line height, lines spacing, button width, padding, border width and border radius.
Final Outcome #
By following the basic steps and a bit more modifying, you can style your Nav Menu as per your preference. Simply just click on the ‘Indicator’ and you will be able to view the dropdown menus as well.
This is how you can easily display amazing navigation Menu on any place of your website using Nav Menu.
If you require any help, feel free to contact our support for further assistance.
