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 used.
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.