Responsive navigation using the Menuar for Elementor

The responsive navigation widget allows you to customize the submenu display position by selecting top or bottom positions or by offsetting it along the X or Y-axis. Set the animation or upload your own icon for the submenu indicator. Get a great multi-level menu without additional efforts. The Menuar plugin has all the necessary features to add several menu locations and configure them according to your site style and needs.

For further work, you need the Elementor to be installed on your site. You can download it from wordpress.org

Open or create a page using Elementor to add the responsive navigation via Menuar. You will find the widget at the end of the general section.

Widget icon

Drag the widget to a page using the Element editor to start customizing. In the left pane of the editors, you can customize the widget to the style of your site. Each of the tabs presented a specific group of settings:

Content Tab

On the Content section, you can manage the basic settings of the responsive site navigation such as layout display, mobile display, submenu, icons, logo, etc.

General settings

  • Select menu – select one of the available menus from the list to display in the widget. To create the menu, go to Appearance>Menus in the WordPress dashboard.
  • Layout – select the menu display layout: horizontal or vertical.
  • Submenu indicator – Select an icon to be added for menu items that have sub-items as an identifier.
  • Pointer – select one of the available pointers for the menu items on hover. The available options: Underline, Overline, Double line, Framed.
  • Show category posts quantity – the toggle to enable/disable the display of the posts quantity for categories added to the menu. The option also allows you to select alignments for the number. It can be before or after the name of the category.

Mobile menu settings

  • Responsive breakpoint – specify a device or custom screen resolution for which the toggle mobile menu will be displayed. The available values: Mobile, Tablet, Custom.
  • Full width – the toggle to enable/disable the full-width display for the mobile menu.
  • Logo – the toggle to enable/disable the logo display for the mobile menu. When the option is enabled, you can choose a logo image through the Logo Mobile menu section.
  • Menu position – select a mobile menu position from the available options: Left, Right, Top.
  • Toggle icon – select the toggle icon from the library or upload your own SVG icon.
  • Close menu icon – select the close menu icon from the library or upload your own SVG. icon
  • Toggle align – specify the alignment for the toggle icons: Left, Center, Right.
  • Submenu click area – select a clickable area for submenu items.

Submenu

  • Expand menu position – specify the position where the submenu will be displayed. It can be Top(over the main menu) or Bottom(under the main menu).
  • Submenu pointer – select one of the available pointers for the submenu items on hover. The available options: Underline, Overline, Double line, Framed.
  • Animation – specify one of the available animations for the submenu items: Grow, Shrink, Slide up, Slide down, Fade, None. The option allows specifying the easing(Ease, Ease-in, Ease-in-out, Linear), duration, and delay.

Logo Mobile menu

  • Logo align – specify the alignment of the logo mobile menu: left, center, right.
  • Mobile menu logo – choose the image for the mobile logo from the media library.
  • Link for logo – insert the link that will be applied to the mobile menu logo.

Style tab

On the style tab, you can manage the element styles of the responsive navigation like menu item colors in different states, size, typography, borders, padding/margin, etc.

Menu item/Submenu item

  • Margin – the setting allows managing the margin of the current element in different units(px, %) for desktops, tablets, or phones.
  • Padding – the setting allows managing the padding of the current element in different units(px, em, %) for desktops, tablets, or phones.
  • Indicator color – select the icon color of the menu indicator.
  • Indicator spacing – the setting allows managing the spacing of the current element in different units(px, %, em) for desktops, tablets, or phones.
  • Indicator click area – specify the click area in different units(px, %, em) for desktops, tablets, or phones.
  • Submenu indicator size – specify the icon size of the menu indicator for desktops, tablets, or phones.
  • Items spacing – the setting allows managing the spacing between the menu items in different units: px, %. The option is available only for the Menu item section.
  • Typography – this group of settings controls everything about typography: font size, font weight, line height, decoration, and other parameters.
  • Menu align – specify the alignment of the menu: Left, Center, Right, Justify.
NORMAL/HOVER/ACTIVE

The menu style settings for different states.

  • Color– specify the font color and opacity for the text of the current block using the color picker.
  • Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
  • Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
  • Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.

Submenu

  • Margin – the setting allows managing the margin of the current element in different units(px, %) for desktops, tablets, or phones.
  • Padding – the setting allows managing the padding of the current element in different units(px, em, %) for desktops, tablets, or phones.
  • Offset – x – specify the x-offset of the submenu in various units: px, %.
  • Offset – y – specify the y-offset of the submenu in various units: px, %.
  • Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
  • Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
  • Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.

Toggle style/Close toggle style

The display styles block of the responsive navigation for the mobiles.

Mobile menu toggle
Close toggle
  • Margin – the setting allows managing the margin of the current element in different units(px, %) for desktops, tablets, or phones.
  • Padding – the setting allows managing the padding of the current element in different units(px, em, %) for desktops, tablets, or phones.
  • Toggle size – specify the size of the mobile toggle using a slider.
NORMAL/HOVER

The toggle style settings for different states.

  • Color– specify the font color and opacity for the text of the current block using the color picker.
  • Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
  • Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
  • Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.

Mobile menu logo

  • Margin – the setting allows managing the margin of the current element in different units(px, %) for desktops, tablets, or phones.
  • Padding – the setting allows managing the padding of the current element in different units(px, em, %) for desktops, tablets, or phones.
  • Height – specify the height of the logo image.
  • Width – specify the width of the logo image.

Mobile menu

  • Padding – the setting allows managing the padding of the current element in different units(px, em, %) for desktops, tablets, or phones.
  • Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
  • Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
  • Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.

Was this article helpful to you?