Getting Started

Throughout the documentation, we use Hello Theme and Elementor’s Dark UI.

Table of Content

1. 1. Requirements
2. 2. Installation
3. 3. Terminologies
   1. 3.1. Mega Menu
   2. 3.2. Mega Submenu
   3. 3.3. Normal Submenu
   4. 3.4. Top Menu Bar, Top-Level Submenu and Sub-Level Submenu
   5. 3.5. Top-Level Items, Submenu Items, Icon, Badge & Item Label
   6. 3.6. Off-Canvas Panel
   7. 3.7. Overlay
   8. 3.8. Dropdown Panel
   9. 3.9. Current Menu Item
   10. 3.10. Paged Menu Header
   11. 4.0. Initial Bubble
4. 4. First steps

1. Requirements

For performance and security, Elemental Menu requires:

• WordPress version 5.6 or greater.
• Elementor Page Builder version 3.15.0 or greater.
• PHP version 7.4 or greater (PHP 7.6 or greater is recommended).
• MySQL version 5.5 or greater (MySQL 5.7 or greater is recommended).
• At least 256MB of PHP memory limit (512MB or greater is recommended).

2. Installation

If you’re familiar with installing a WordPress plugin, just go ahead with the standard steps.

If you’re new to WordPress, please refer to WordPress codex’s installing plugins instruction to know how to install a plugin.

3. Terminologies

3.1. Mega Menu

A Mega Menu is a menu containing at least one mega menu item which has a mega submenu.

3.2. Mega Submenu

A Mega Submenu is the submenu of a mega menu item:

You will learn how to enable mega on a menu item in the Edit Menu Item article.

3.3. Normal Submenu

A Normal Submenu is a submenu of a non-mega menu item and contains the standard submenu items:

3.4. Top Menu Bar, Top-Level Submenu and Sub-Level Submenu

1. Top Menu Bar is the container (either vertical or horizontal) which contains the top-level menu items.
2. Top-Level Submenu is a Mega Submenu or the very first Normal Submenu.
3. Sub-Level Submenu is a submenu of a submenu.

3.5. Top-Level Items, Submenu Items, Icon, Badge & Item Label

Below image illustrate the terms:

3.6. Off-Canvas Panel

Off-Canvas Panel is a panel which is hidden by default. By clicking on the menu toggle button, this panel will slide out (from left or right), cover entire screen with an overlay and temporarily block the page behind it from interaction:

You can close the Off-Canvas panel by either clicking on anywhere outside the panel or the close/back button.

3.7. Overlay

Overlay is the mask layer which covers part of the page when a Mobile Menu is active. For example, the dark transparent layer below:

3.8. Dropdown Panel

Dropdown Panel is a panel which is also hidden by default. By clicking on the menu toggle button, this panel will slide down as you can see in the image below. It does not cover entire screen or block the page behind it from interaction.

You can close a Dropdown Panel by clicking on the menu toggle button only.

3.9. Current Menu Item

A Current Menu Item is a menu item linked to the page that is being viewed by an user.

3.10. Paged Menu Header

Paged Menu Header is the top section of a Mobile Menu displaying in “Paged” layout.

4.0. Initial Bubble

It’s the rounded shape around the Toggle Button when you select “Fullscreen” layout on Mobile with “Bubble Up” entrance animation.

4. First steps

1. Create a menu by go to Dashboard > Appearance > Menus > Create a new menu
2. Open your Elementor editor. (A page, a template…)
3. Enter “menu builder” on the search box of the Elementor Widgets Panel.
4. Drag and drop the “Elemental Menu” widget into the location where you want to show this menu.
5. From “Menu” control on the General section, select the menu you just created at the step 1.
6. Click on the Elementor editor’s “PUBLISH” or “UPDATE” button.

That’s all to get started with the plugin. Let’s move to the next topic: Adjust Menu Appearance