How to set up and style the Animated Hamburger Icon widget in Elementor.
Animated Hamburger Icon is a menu button whose three lines turn into a cross, an arrow or a minus when clicked. It can open and close any section, container or menu on the page by its CSS ID or class, so you can build your own mobile menu or off canvas panel with Elementor.
Part of: Bright Addons (free).
| Option | What it does |
|---|---|
| Animation | How the three lines change when the icon is clicked. |
| Show Open State in the Editor | Shows the open icon in the editor only, to style it. Visitors always see the closed icon first. |
| Label | Optional text next to the icon. |
| Label When Open | The label text while the element is open. |
| Label Position | Puts the label left or right of the icon. |
| Screen Reader Text (Open) | What screen readers announce before the element is opened. |
| Screen Reader Text (Close) | What screen readers announce while it is open. |
| Alignment | Aligns the icon left, center or right, per device. |
| Option | What it does |
|---|---|
| On Click | Open and close an element, Go to a link, or Only animate. |
| Element to Open (CSS Selector) | The ID or class of the element to open, for example #main-menu or .mobile-panel. |
| Class Added When Open | The class the element gets while open, is-open by default, for your own CSS. |
| Hide the Element Until Opened | Hides the element on page load and shows it with a fade when opened. |
| Stop Page Scrolling While Open | Stops the page behind from scrolling while the element is open. |
| Close on Click Outside | Closes the element when the visitor clicks anywhere else. |
| Close When a Link Inside Is Clicked | Closes it when a link inside the element is clicked, handy for one page menus. |
| Link | Where the icon leads when On Click is Go to a link. |
Pro adds 98 widgets, 10 extensions, a Theme Builder and 32 dynamic tags, and keeps every free widget. From $10 a year, with a 14-day money-back guarantee.
These sections are in the Style tab.
width, thickness, gap between lines, middle line width, line roundness, animation duration, and colors for normal, hover and open.
padding, background for normal, hover and open, border, border radius and box shadow.
typography, color, color when open and the gap between the icon and the label (shown when a label is set).
Any element on the same page: a container, a section, a column or a widget. Give it a CSS ID or class in its Advanced tab and type that selector in Element to Open (CSS Selector).
Yes. Turn off Hide the Element Until Opened and style the element with the class in Class Added When Open, is-open by default.
Yes. It is a real button with an expanded state and screen reader text for open and close, and it works with the keyboard.
Yes. Put the Nav Menu widget in a container, give the container an ID and let the icon open it.
Check the troubleshooting guide, or contact support with the page address and what you expected to happen.
Troubleshooting guideYearly and lifetime plans. Use this code at checkout:
14-day money-back guarantee. Ends Monday 30 November at 23:59.