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.
Select the animation from the given options
- X Effect
- Minus Effect
- Arrow Left
- Arrow Right
- Arrow Down
- Slant Effect
- Arrow Up
Choose the alignment of the hamburger icon
Use any dynamic tag to link with the hamburger icon.
Type any z-index for widget
Type any close trigger id.
Style the hamburger color, size, background color, border-radius, and inner icon size with this option.
Here are some live use cases for the Animated Hamburger widget.