Nav Menu

How to use Nav Menu Widget of Sky Addons for Elementor

Sky Addons Nav Menu Widget is a powerful tool that lets you create stylish and functional navigation menus for your Elementor website. This widget is perfect for anyone looking to enhance their website’s user experience with custom menus. It’s part of the essential addons for Elementor, offering a seamless integration with the elementor page builder.

Description:

The Nav Menu widget provides a flexible way to design navigation menus directly within Elementor. Whether you’re building a simple landing page or a complex elementor website, this widget allows you to create menus that match your brand. It supports various customization options, including menu styling, hamburger menus for mobile responsiveness, and dropdown configurations. It’s an essential elementor plugin for creating user-friendly navigation. The widget is designed to be responsive, ensuring your navigation looks great on any device. It’s a great way to create an elementor landing page with a professional touch.

Key Features List –

1. Menu Selection: Easily select any existing WordPress menu to display.
2. Sub Menu Animation: Control the speed of the sub-menu opening animation.
3. Hamburger Menu: Create a responsive hamburger menu for smaller screens.
4. Style Options: Customize the menu’s appearance, including colors, typography, and spacing.
5. Dropdown Styling: Style the appearance of dropdown menus.
6. Offcanvas Panel: Customize the appearance of the offcanvas panel that appears when the hamburger menu is activated.

Insert Nav Menu Widget

1. Open Elementor Editor. In the Elementor panel, search for “Nav Menu”.
2. Drag and Drop the Widget to the desired location on your page/editor.

Layout Section

• Select Menu: Choose the WordPress menu you want to display in the widget.
• Sub Menu Open Speed: Set the animation speed for dropdown menus (Slow, Medium, Fast).

Hamburger Menu Section

This section controls the appearance and behavior of the hamburger menu, which is typically displayed on smaller screens.

• Menu Logo: Upload a logo to display in the hamburger menu. This helps maintain branding on mobile devices.
• Logo Link: Choose where the logo links to (Home Page or Custom URL).
• Custom Link: If “Custom URL” is selected, enter the URL for the logo link.
• Open Icon: Choose an icon for the hamburger menu button. This is the icon users will click to open the menu.
• Remove Parent Link: Option to remove the link from parent menu items in the hamburger menu. This can simplify navigation on mobile.
• Responsive Breakpoint: Choose the breakpoint at which the menu converts to a hamburger menu (Desktop, Tablet, Mobile). This determines when the full menu collapses into the hamburger menu.

= Style Customization =

Customize the appearance of your navigation menu, including colors, fonts, spacing, and more, to perfectly match your website’s design.

Nav Menu Section

• Alignment: Set the horizontal alignment of the menu items (Left, Center, Right).
• Spacing: Adjust the spacing between menu items.
• Background: Set a background color or gradient for the menu wrapper.
• Typography: Customize the font, size, and style of the menu text.
• Padding: Adjust the padding around the menu items.
  • Normal:
    • Text Color: Set the text color for normal menu items.
    • Background: Set the background color or gradient for normal menu items.
    • Border: Add a border to normal menu items.
    • Border Radius: Set the border radius for normal menu items.
  • Hover:
    • Text Color: Set the text color when hovering over menu items.
    • Background: Set the background color or gradient when hovering over menu items.
    • Border Color: Set the border color when hovering over menu items.
  • Active:
    • Text Color: Set the text color for the active menu item.
    • Background: Set the background color or gradient for the active menu item.
    • Border Color: Set the border color for the active menu item.

Dropdown Section

• Width: Set the width of the dropdown menus.
• Padding: Adjust the padding inside the dropdown menus.
• Background: Set a background color or gradient for the dropdown menus.
• Box Shadow: Add a box shadow to the dropdown menus.
• Border Radius: Set the border radius for the dropdown menus.

Hamburger Button Section

Note: Please select tablet/mobile responsive mode to see the hamburger button preview.

• Alignment: Set the alignment of the hamburger button (Left, Center, Right).
• Padding: Adjust the padding around the hamburger button.
• Size: Set the font size of the hamburger button icon.
• Border: Add a border to the hamburger button.
• Border Radius: Set the border radius for the hamburger button.
  • Normal:
    • Text Color: Set the text color for the hamburger button.
    • Background: Set the background color or gradient for the hamburger button.
    • Text Shadow: Add a text shadow to the hamburger button.
    • Box Shadow: Add a box shadow to the hamburger button.
  • Hover:
    • Text Color: Set the text color when hovering over the hamburger button.
    • Background: Set the background color or gradient when hovering over the hamburger button.
    • Border Color: Set the border color when hovering over the hamburger button.
    • Border Radius: Set the border radius when hovering over the hamburger button.
    • Text Shadow: Add a text shadow when hovering over the hamburger button.
    • Box Shadow: Add a box shadow to the hamburger button.
    • Animation: Choose a hover animation for the button.

Hamburger Menu Offcanvas Panel

The hamburger menu, when activated, opens an offcanvas panel. This panel contains the navigation menu and can be further customized. While the styling options for the offcanvas panel itself are limited within this widget, you can use custom CSS or other Elementor widgets within the panel to achieve more advanced designs. The basic structure of the offcanvas panel includes a header (with the logo and close button) and a body (containing the menu).

Save and Preview

1. Once you’ve customized and styled your accordion, click “Publish” or “Update” to save your changes.
2. Preview the page to ensure the widget looks and functions as desired.

Troubleshooting

1. Menu Not Displaying: Ensure that a menu is selected in the “Layout” section and that the menu has items assigned to it in the WordPress menu settings.
2. Hamburger Menu Not Appearing: Check the “Responsive Breakpoint” setting in the “Hamburger Menu” section and ensure you are viewing the page on a smaller screen size.
3. Offcanvas Panel Not Opening: Make sure the hamburger button is correctly configured and that there are no JavaScript errors on the page that might be preventing the panel from opening.

Conclusion

The Sky Addons Nav Menu widget offers a comprehensive solution for creating custom navigation menus in Elementor. With its wide range of styling options and responsive features, you can easily create menus that enhance your website’s user experience. The hamburger menu and offcanvas panel provide a mobile-friendly navigation solution. This widget is a valuable addition to any elementor website builder toolkit, especially when creating an elementor website or elementor landing page. It’s one of the essential addons for elementor.

If you have any questions or encounter any challenges while using, please don’t hesitate to reach out to our dedicated support team at https://wowdevs.com/support/ where our expert team is ready to provide prompt and helpful assistance.