A full header menu is hard to use on a phone screen.
The Mobile Menu widget from The Plus Addons for Elementor builds an app-style menu bar for small screens: icon and text items, an optional highlighted button that opens a link or an Elementor template, and a bar pinned to the top or bottom of the screen.
Requirement – This widget is a part of The Plus Addons for Elementor Pro, make sure it’s installed & activated to enjoy all its powers.
Before You Start
- Edition: Pro — Mobile Menu is a Pro widget. In the free plugin it appears in the Elements panel with a lock icon, and a page that already holds a Mobile Menu widget shows nothing of it while Pro is inactive.
- Widget to enable: Mobile Menu, switched on under The Plus Addons > Widgets.
- Where to add it: any page, or a header template (for example with the free Nexter Builder) to show the menu on every page, as the widget’s own panel recommends.
- Elementor (free) installed and activated.
Video Tutorial
How to Activate the Mobile Menu Widget
- Go to The Plus Addons > Widgets.
- Search for Mobile Menu and switch it on.
Content Tab
Mobile Menu
- Style: two pictures. Style 1 is one bar of items; Style 2 is a split menu with Menu 1 on the left and Menu 2 on the right.
- Position: Fixed (default) pins the bar to the screen; Absolute keeps it where the widget is placed, so it scrolls away with the page.
- Fixed Position (Fixed only): Bottom (default) or Top.
- Open Mobile Menu: the widest screen that shows the bar, in px. With 767 the bar shows up to 767 px and is hidden from 768 px. When it is empty, the bar shows on every screen, desktops included.
Menu 1 and Menu 2
Menu 1 starts with four items. Open an item to set it up, and use + Add Item for more. Menu 2 only appears with Style 2 and holds the items on the right side.
- Select Icon: Icon or Image (shown 30 px wide by default).
- Text: the label under the icon.
- Link: where the item goes. It always opens in the same tab: the link options Open in new window and Add nofollow are not applied. An item without a link cannot be reached with the keyboard.
- Pin Text: a small badge in the corner of the item, for example a cart count.
Extra Toggle
Switch on Extra Toggle to add a highlighted button: at the end of the bar with Style 1, in the middle with Style 2.
- Select Toggle Icon, Icon / Image and Text set its look.
- Content: Link opens a URL. Template opens an Elementor template in a panel, with Open Content Direction, Open Content Style and Content Width. See Create a popup mobile menu with an Elementor template.
Extra Options
- Display: Swiper (default) makes a sideways-swipeable strip; Columns shares the width of the bar equally between the items.
- Active Page Indicator: marks the item whose link is the page being viewed. Choose Style Line or Dot. For Line, also choose Position Top or Bottom: with the default Select no line is drawn.
- Pin Text Overflow: Visible stops Pin Text badges being cut off. It only affects Style 2.
The bar with a Line indicator at the Bottom of the current page’s item:
Style Tab
| Section | What it styles |
|---|---|
| Icon/Image | Icon size and colour (Normal / Active), image size, border, radius and shadow. |
| Extra Toggle Icon/Image | The Extra Toggle’s icon or image (only with Extra Toggle on). |
| Active Page Indicator | Line width, height and colour, or dot size and colour. |
| Menu | Outer Padding, Menu Width, Menu Height, title typography and colours, item background, border, radius and shadow for Normal and Active items. |
| Extra Toggle | Width or equal size, Toggle Offset, background, border, radius and shadow of the button. |
| Extra Toggle Template | The template panel: Overflow, Inner Padding, background, Close Icon Position and colours, Overlay Background. |
| Content Background | Padding, background, border, radius, Overflow and shadow of the whole bar. |
| Pin Text Options | Padding, offsets, text size, typography, colours and shape of the badges. |
| Extra Options | Show Mobile Menu Scroll Offset and Scroll Top Offset Value (see below). |
Show the Bar After Scrolling
In Style > Extra Options, switch on Show Mobile Menu Scroll Offset and set Scroll Top Offset Value (default 100 px). The bar stays hidden until the visitor scrolls further down than that value, and hides again when they scroll back above it.
How It Behaves
- A fixed bar spans the full width of the screen and stays in place while the page scrolls.
- With two Mobile Menu widgets on one page, opening the Extra Toggle panel of one leaves the other closed.
- The Advanced tab holds the usual Elementor options (margin, padding, responsive visibility, custom CSS) plus The Plus Addons’ Display Condition.
Limitations
- The default item icon does not show on the page. Choose an icon from the library for every item.
- An Extra Toggle set to Link with an empty Link field is not clickable.
- With a draft template, the Extra Toggle panel shows visitors an Unauthorized Access message.
- A fixed bottom bar sits on top of the page. At the very end of a page it covers the last lines of content, so add some space below your content.
- If The Plus Addons for Elementor Pro is deactivated, pages that hold the widget show no menu at all.
Troubleshooting
The menu shows on desktop
Set Open Mobile Menu, for example to 767.
The Active Page Indicator shows nothing
With Style Line, choose a Position (Top or Bottom). Also check that the item’s link is the exact address of the page.
Items show text but no icon
Pick an icon for each item; the default icon is not displayed on the page.
