Advanced Menu

The Advanced Menu widget allows you to create sophisticated website menus that incorporate various design elements, such as text, images, and icons.

Content Tab

Menu Items: List of all menu items that you can edit. Each item can be dragged to reorder, edited, or deleted.
- To edit a menu item, click the pencil icon.
- To delete a menu item, click the 'X' icon.
- To create nested items (submenus), drag an item slightly to the right underneath its parent item.
Item Type: Select between a Menu or a Sub Menu for each item.
Submenu Width: Set the width for the submenu.
Submenu Position: Choose the position of the submenu relative to the menu item; options include Left, Center, or Right.
Add Item: Click to add a new menu item to the list.

If you select 'Sub Menu' as content type here are your options:

Content Type: Choose the type of content that will be displayed as sub menu.
- 'Text' as content type: Choose this option for simple and traditional sub menu items.
  - Text: Enter the text for the menu item. Choose this option for simple and traditional sub menu items.
  - Link: Provide the URL for the menu item. Use dynamic tags for internal links.
  - Anchor Hash: Insert an ID for the menu item that can be used as an anchor link (e.g., #about-us).
  - Icon: Choose an icon to display alongside the menu item text.
- 'Saved Section' as content type: Choose this option if you intend to open more complex content as sub menu called 'Mega Manu'.
  - Select Section: Select a section that you have already saved to be displayed as sub menu. To manage or create section templates, go to your WordPress dashboard > Templates > Saved Templates > Section
- 'Saved Widget' as content type: Similar to Saved Section, this option will display a widget that you already saved as sub menu item. To create widget templates, go to your WordPress dashboard > Templates > Saved Templates > Global Widget

To create mega menus, choose "Saved Section" as the content type. To learn more about how to create mega menus click here.

Layout: Select the menu layout type: Horizontal, Vertical, Dropdown, or Off-Canvas.
Align: Choose the alignment of the menu items.
Center Logo: Toggle whether to have a logo centered between the menu items.
Pointer: Select the style of the pointer that highlights menu items, like Underline, Overline, Double Line, Framed, Background, or Text.
Animation: Choose an animation effect for when hovering over menu items.
Submenu Animation: Set the animation for how submenus appear, such as Fade or Slide down.
Show Submenu On: Decide if the submenu will appear on click or hover.
Submenu Indicator: Choose an icon to indicate the presence of a submenu.

Full Width: Toggle to stretch the mobile menu to full width.
Breakpoint: Set the breakpoint at which the mobile menu will be displayed. You can choose to display the mobile design of the menu when the viewport is below 767px or below 1024px.

Menu Layout: Choose the layout for the mobile menu: Dropdown, Full Screen, or Side Menu.
Toggle Button Animation: Select an animation for the mobile menu toggle button.
Custom Toggle Icon: Toggle the use of a custom icon for the mobile menu button.

Typography: Customize the font properties for the menu items.
Space Between: Adjust the space between menu items.
Padding: Set the padding around each menu item for top, right, bottom, and left.
Pointer Width: Control the width of the pointer (underline, overline, etc.) for menu items.
Text Color: Set the text color for Normal, Hover, and Active states.
Background Color: Choose a background color for Normal, Hover, and Active states.
Border:
- Border Type: Select the type of border for menu items: none, solid, double, dotted, dashed, or grooved.
- Border Radius: Adjust the radius of the border to control corner roundness.
  Icons:
- Size: Set the size of the icons in the menu.
- Spacing: Adjust the space between the icon and the menu text.
- Color: Choose the color of the icons for Normal, Hover, and Active states.

Typography: Configure the font settings for submenu items.
Alignment: Set the alignment of submenu items: left, center, or right.
Space Between: Modify the space between submenu items.
Padding: Adjust the padding within each submenu item.
Position: Choose the position of the submenu relative to the menu item.
Divider:
- Border Type: Choose the divider style between submenu items.
Border:
- Border Type: Select the border style for submenu items.
- Border Radius: Customize the border radius for submenu items.
Box Shadow: Add a shadow effect to submenu items.
Text Color: Set text color for Normal, Hover, and Active submenu items.
Background Color: Choose a background color for Normal, Hover, and Active submenu items.

Container Background:
- Background Type: Select the background type, either classic color or gradient.
- Color: Choose a color for the dropdown container background.
Typography: Set the font properties for dropdown menu items.
Padding: Customize the padding inside the dropdown container.
Sub Items Indentation: Adjust how much submenu items should be indented.
Distance: Set the distance between the menu item and the dropdown menu.
Container Box Shadow: Apply a shadow effect to the dropdown container.

Size: Adjust the size of the dropdown toggle button.
Padding: Set the padding around the dropdown toggle button.
Alignment: Align the toggle button to the left, center, or right.
Color: Select colors for Normal, Hover, and Active states of the toggle button.
Background Color: Choose a background color for the toggle button.
Border:
- Border Type: Pick a border style for the toggle button.
- Border Radius: Control the roundness of the toggle button corners.

Blur Content: Toggle to apply a blur effect to content when a submenu or mega-menu is opened.
Content Overlay: Add an overlay to the content when a submenu or mega-menu is opened.