Navigation (Header and Footer)

The Navigation widget allows you to add a fully customizable menu to your site's header or footer. Use it to create intuitive navigation so visitors can easily explore your pages, categories, or custom links. It supports responsive layouts, dropdown menus, and advanced styling options.

How to Add the "Navigation" Widget

1. In Elementor, open the page, header, or footer template where you want to place your menu.
2. From the Houzez widgets panel, drag the Navigation widget into the desired section.
3. By default, it will load your Main Menu (configured in WordPress > Appearance > Menus).

Configuration Options

Content Tab

• Menu: Select which WordPress menu you want to display (e.g., Main Menu, Footer Menu).
• Layout: Choose between Horizontal, Vertical, or Dropdown layout.
• Align: Align the menu (left, center, right).
• Pointer: Style the menu hover effect with underline, overline, double line, framed, background, or text.
• Animation: Choose the submenu animation effect (fade, slide, grow, drop-in, drop-out, none).
• Submenu Indicator: Select the arrow style for dropdowns (angle, plus, caret, etc.).

Mobile Dropdown

• Breakpoint: Decide when the menu collapses into a mobile menu (e.g., tablet portrait & less).
• Toggle Align: Position the mobile toggle button (left, center, right).
• Icon: Choose the toggle icon style.

Style Tab

• Main Menu: Customize typography, text colors (normal, hover, active), dividers, spacing, and padding.
• Dropdown: Control submenu text color, background color, typography, padding, and border options.
• Toggle Button: Adjust button size, padding, color, background, borders, and hover effects.
• Offcanvas Header: Change the color and background for the offcanvas mobile navigation panel.

Best Practices

• Keep your menu structure simple — avoid too many nested levels.
• Use clear labels for menu items so users know exactly what to expect.
• For mobile, ensure the toggle button is visible and easy to tap.
• Limit the number of top-level items for better readability across devices.
• Test your menu on desktop, tablet, and mobile to confirm it works smoothly.