The Animated Hamburger widget allows you to create animated hamburgers to toggle elementor popups. It comes with different options for the animation effect. You can also customize the size, position, and other styling of the widget to suits your website’s look. You can also put a menu in the popup and create a full-screen menu using this widget.
Let’s look at each of the options in the “Animated Hamburger Widget” below.
Install Animated Hamburger Widget for Elementor #
This widget requires Unlimited Elements Free version installed and activated on your WordPress website.
- Go to Unlimited Elements Widget Library
- Search in the search bar for “Animated Hamburger”
- Hover over the widget in the search results and click install
- Add your “Animated Hamburger” widget to any Elementor Page
Create a Header Template #
1. Navigate to Elementor Template >> Theme Builder>> Header>>Add New
2. Add the Animated Hamburger Icon widget into the created header.
Create a Popup Template #
Navigate to Elementor Template >> Popups>> Add New
Link Popup into Header template #
Go to Widget’s General Settings>>Link>>Select dynamic tag>> Select the popup you want to link.
General Settings #
Effects
Select the animation from the given options
- X Effect
- Minus Effect
- Arrow Left
- Arrow Right
- Arrow Down
- Slant Effect
- Plus
- Arrow Up
Alignment
Choose the alignment of the hamburger icon
- Left
- Center
- Right
Link
Use any dynamic tag to link with the hamburger icon.
Z-index
Type any z-index for widget
Close Trigger ID
Type any close trigger id.
Widget Styling #
Style the hamburger color, size, background color, border-radius, and inner icon size with this option.
Usage Examples #
Here are some live use cases for the Animated Hamburger widget.
