The ElementsKit Nav Menu widget allows you to create fully customizable navigation menus in Elementor. You can build dropdowns and mega menus, along with a fully responsive mobile menu. It works inside a header/footer template built with ElementsKit

Key Features of ElementsKit Nav Menu #

• Use existing WordPress menus.
• Dropdown & mega menu support.
• Fully responsive with mobile hamburger control.
• Custom styling for desktop and mobile menus.

ElementsKit Nav Menu #

First, you have to turn On header footer builder module.

Turn On Module #

Access to Dashboard:

1. Find ElementsKit
2. Click Modules
3. Find Header Footer Builder and turn it ON
4. Save Changes

• Next, go to ElementsKit Widgets
• Turn ON the Nav Menu widget

Create a Header #

1. From ElementsKit click Header Footer
2. Click Header
3. Add New

Template settings #

1. Settings
   • Title- Type a name for the template
   • Type- Header
   • Conditions- Entire Site
2. Activate/Deactivate- Toggle to ON
3. Click Edit with ElementsKit

Customization #

Find ElementsKit Nav Menu and drag and drop it. 

Content Tab – In the Content part, you will find the following setting options.

Menu Settings #

• Select menu: Selecting Menu will show the existing menus of your website.
• Horizontal menu position: Menu position options are Left, Center, Right, and Justified.
• Dropdown open as: Keep it on Hover or Click.
• Dropdown Indicator Icon: Sets the icon shown next to menu items that have a dropdown.

• Enable one page?: Toggle this option to “Yes” to enable smooth scrolling for a single-page website layout. Ensure your menu links are set to anchor tags that point to specific sections on the same page.
• Response Breakpoint: Select the screen size where the menu collapses into a mobile toggle. Choose between Tablet or Mobile to trigger the responsive layout.

This is how it works if you choose mobile and tablet responsive breakpoint.

Mobile Menu Settings #

Along with the ElementsKit mega menu, the mobile menu in Elementor gives you full control over how your navigation looks and behaves on smaller screens.

• Mobile Menu Logo: Set a logo for mobile view.
• Menu Link: Keep it default for home or insert any link you want in the Custom URL field. When people click the logo, they will be redirected to that given link.
• Hamburger Icon (Optional): Choose an icon from the library or upload SVG.
• Submenu Click Area: If the menu has a submenu then you can set Icon for the area.

Style the Nav Menu #

• Menu Wrapper: This section allows you to adjust menu height, background type, padding, width, menu border-radius, menu icon spacing, etc.

• Menu Item: Menu items can be styled here using background type, color, border-spacing, item margin, etc.

• Submenu Indicator: To personalize the submenu indicator, you can change font size, color, border type, border width, border radius, etc.

• Submenu Item: Same as the menu items, you can customize submenu items in this section.

• Submenu Panel: Expanding this part will allow you to customize submenu panel with many options.

• Hamburger Menu: In this section, you can style the hamburger with different icon colors, sizes, positions, options, and so on.

• Mobile Menu Logo: This part is to customize This part is for customizing the mobile menu logo according to your preferences.

However, if you need even finer adjustments for your Nav Menu, you can always add custom CSS through Elementor’s Advanced tab.

Here we have prepared a nav menu example, which is a desktop view.

Provide your customers with a fantastic system to find their things with the ElementsKit influential nav menu widget. So, use the widget now, make your design appealing, and save time.