How To Use The Mobile Menu Widget By Atomic Addons

The Mobile Menu widget by Atomic Addons builds a row of links that share the width equally, each with an icon above a short label — the tab bar you know from phone apps. You type the items yourself, so the bar does not need a WordPress menu. This guide covers adding the widget, building the items and styling the bar.

Enable the Mobile Menu Widget

Mobile Menu is a Free widget and works with the free Atomic Addons plugin. Switch it on from the plugin dashboard:

1. 1

   Go to WordPress Dashboard → Atomic Addons.

2. 2

   Click the Widgets tab.

3. 3

   Search for Mobile Menu. You can also open the Menu / Navigation category.

4. 4

   Turn the Mobile Menu widget on.

5. 5

   Click Save Settings.

Add the Mobile Menu Widget

Mobile Menu works on any page, and in a header or footer template:

1. 1

   Open the page in Elementor (Edit with Elementor).

2. 2

   In the widget panel, search for Mobile Menu. The widget sits in the Atomic Addons category.

3. 3

   Drag it into the page and set it up with the controls below.

4. 4

   Click Publish (or Update).

The widget draws the bar where you drop it, at the full width of its column. To pin it to the bottom of the screen, use Elementor's own Position setting on the widget's Advanced tab (choose Fixed and anchor it to the bottom). To show it only on phones, turn on Hide On Desktop and Hide On Tablet under Advanced → Responsive.

Menu Items

Open the widget and go to Content → Menu Items:

1. 1

   Menu Style: Default shows plain items. Border Box draws a thin border around every item, so the bar reads as a row of cells that share their dividing lines.

2. 2

   Items: The list of links. It starts with Home, Cart and Account. Click Add Item for another link, drag the items to reorder them, or use the icons on an item to copy or remove it.

Click an item to open its settings:

1. 1

   Icon: The icon above the label, from the icon library or an SVG you upload. Leave it empty for a text-only item.

2. 2

   Menu Text: The label under the icon. Keep it short: a label that does not fit is cut off with “…”.

3. 3

   Link: Where the item goes: a page address, or a section ID with the # in front, such as #contact, to jump to a section of the same page. It is # by default. The link options let you open it in a new tab or add nofollow, and you can fill it with a Dynamic Tag.

An item whose Link is the full address of the page being viewed is marked as the current page: it gets the darker text color and the styles of the Active tab (see below). Use the full address, such as https://example.com/cart/, for this to work.

Style the Mobile Menu

Everything below is on the Style tab:

• Menu Items — the item cells in Normal, Hover and Active states: background, border radius, padding, margin, the Gap between icon and label, and shadow. With the Border Box style it adds Border Type, Border Width and Border Color. The Active tab sets the Color and Background of the current page's item.
• Menu Icon — the icon's color, background, border, border radius, padding, shadow and Size, with a Hover state.
• Menu Text — the label's color, typography, background, border, border radius, padding, margin and shadow, with a Hover state.