Mobile Menu

Mobile Menu custom WPBakery Page Builder element, added by Loyde, renders a mobile menu. The mobile menu consists of:

  • The button which opens the mobile menu panel ("hamburger icon")
  • The menu navigation drawer (panel which shows/hides on button click)

The most common scenarios for using Mobile Menu element

Mobile Menu element is a regular WPBakery Page Builder element. So, it can be added to any page or post edited using the page builder. However, the most common scenario is adding Mobile Menu to a custom header built with page builder. More info here.

How to customize the button

Steps:

  1. Add a Mobile Menu instance to the edited page or post
  2. Open the Settings for the added element
  3. Open the "General" tab
  4. Under "Mobile Menu Icon Type" choose Icon or Image. Both of these options will open additional field below
  5. If "icon" was selected, choose an icon under "Mobile Menu Icon Library"
  6. If "Image" was selected, choose an image from Media section, under field "Mobile Menu Icon Image"
  7. Save changes.

How to select the menu for rendering

It's possible to select menu by two different criteria:

  1. By menu location
  2. By menu name

Selecting by menu location

The user selects a menu location defined on the website. Loyde defines a few menu locations, but 3rd-party plugins can add more. More information here.

This is useful if it's necessary to always display the menu assigned to e.g. "Primary" menu location, considering that the assigned menu can be changed in the future.

Selecting by menu name

The user selects the menu by it's name. This is useful for displaying menus which aren't currently assigned to any menu location. That way, the user can create a new menu in WordPress dashboard for any number of special cases (not anticipated by Loyde menu location), without the need to create a new menu location for each of them.

How to display a title over the mobile menu navigation drawer

Steps:

  1. Add a Mobile Menu instance to the edited page or post
  2. Open the Settings for the added element
  3. Open the "Title" tab
  4. Type in some text to the "Title" field
  5. Save changes.

How to override general settings (from Theme Options) for individual instance of "Mobile Menu" element

By defauot, menu styles will be affected by either:

But, it's possible to overwrite these settings for individual instances of "Menu" element.

Steps:

  1. Add a Mobile Menu instance to the edited page or post
  2. Open the Settings for the added element
  3. Open the "Colors" tabs, and choose the desired values which should be applied
  4. Save changes.

How to choose an icon which will be displayed next to menu items

It's possible to select icons for:

  • Main menu items
  • Submenu items

Steps:

  1. Add a Mobile Menu instance to the edited page or post
  2. Open the Settings for the added element
  3. Open the "Icon" tab
  4. Select the desired icon family, under the "Menu Item Dropdown Icon library" dropdown
  5. In the "Menu Item FontAwesome Dropdown Icon" field choose the desired icon
  6. On the same tab, repeat the steps for submenu also, if necesary
  7. Save changes.

** custom WPBakery Page Builder element, added by Loyde, renders a .

How to apply primary & secondary accent color to the element

See description here.

How to apply a basic styling, which applies to the element as a whole

See description here.