Primary Menu

Overview

The Primary Menu Widget allows you to customize your menu which and place the menu wherever you want in the webpage. It automatically detects menu from the web page.

Screenshot

The following is a GIF video to show you how to use the primary menu widget and the various options available :
primary menu 1

Primary Menu

  • Select Menu : Select Menu from the list to edit.
  • Alignment : Choose the alignment of the menu.
  • Layout : Select the layout of the menu from Horizontal, Vertical and Dropdown.
  • Dropdown Breakpoint : Select a device name in which menu layout is converted into dropdown.
  • Pointer : Select an hover style for menu.
  • Animation : Select an animation style for pointer.
  • List Style : Select a list dot style which works when menu layout is selected Vertical.
  • Submenu Indicator : Select style for arrow icon of menu.

Menu Style

Normal

  • Color : Set the menu text color.
  • Background Color : Set the menu text background color.Hover

Hover

  • Color : Set the menu text color.
  • Background Color : Set the menu text background color.

Active

  • Color : Set the menu text color.
  • Background Color : Set the menu text background color.
  • Typography : Set the font and text style of menu.
  • Horizontal Padding : Set the horizontal padding of the menu.
  • Vertical Padding : Set the vertical padding of the menu.

SubMenu Style

Normal

  • Color : Set the submenu text color.
  • Background Color : Set the submenu text background color.

Hover

  • Color : Set the submenu text color.
  • Background Color : Set the submenu text background color.

Active

  • Color : Set the submenu text color.
  • Background Color : Set the submenu text background color.
  • Typography : Set the font and text style of submenu.
  • Horizontal Padding : Set the horizontal padding of the submenu.
  • Vertical Padding : Set the vertical padding of the submenu.
  • Left Margin : Set the left margin of the submenu.

Toggle Style

primary menu 2

Note : It works when layout is selected to dropdown.

  • Alignment : Choose the alignment of the toggle button, It works when layout is selected to dropdown.
  • Color : Set the bars color.
  • Background Color : Set the toggle button background color.
  • Font Size : Set the size of toggle button icon.
  • Padding : Set the padding of the toggle button.

Dropdown Style

Slide Style :-

Slide Down

  • Width : Set width of the submenu.
Slide From Right

  • Width : Set width of the submenu.
  • Menu Items Width : Set the width of submenu items.
  • Horizontal Position : Set the horizontal position of the submenu items.
  • Vertical Position : Set the vertical position of the submenu items.

Slide From Left

  • Width : Set width of the submenu.
  • Menu Items Width : Set the width of submenu items.
  • Horizontal Position : Set the horizontal position of the submenu items.
  • Vertical Position : Set the vertical position of the submenu items.

Full Screen

  • Menu Items Width : Set the width of submenu items.
  • Horizontal Position : Set the horizontal position of the submenu items.
  • Vertical Position : Set the vertical position of the submenu items.
  • Background : Select background of submenu from None, Color(select any color you want), Gradient(set value of gradien).

Close

  • Font Size : Set the size of close icon.
  • Padding : Set the space around close icon.
  • Horizontal Position : Set the horizontal position of close button.
  • Vertical Position : Set the vertical position of close button.

Normal

  • Color : Set color of close button.
  • Background Color : Set background color of close button.

Hover

  • Color : Set color of close button.
  • Background Color : Set background color of close button.
Was this helpful to you?