In this article we will go through the steps of adding an Animated Hamburger icon to your Elementor website. You can use the Animated Hamburger Icon widget to toggle Elementor pro popups. You can even put a menu in a popup and create a full screen menu. So let’s dive in?
Step 1:
Install Animated Hamburger Widget in Unlimited Elements
Our first step is to install the Animated Hamburger Widget in Unlimited Elements plugin. Btw, this is totally free.
Go to widgets under the Unlimited Elements for Elementor menu.
Search for the animated hamburger widget and press the install button.
Step 2:
Create a WordPress menu
Upon clicking the animated hamburger icon, you expect to open a menu, right? So for that we need to create a menu in WordPress.
Create all the pages that you want to add to your menu
Because a menu needs pages then go ahead and create all the pages that you want to add to your menu. Once you’re done creating pages, then the next task is to create the menu.
Create the WordPress Menu
Go “Appearance” -> “Menus” in the wp-admin sidebar
You will see this screen where you have to enter a name for the menu. Then click on the create menu button.
Now on the left side, you will see a menu called pages. That’s where you can select all the pages that you created, to be added to your menu. After selecting all the pages you need, click on “Add to menu” and then on the blue “Save Menu” button.
That’s it. Our menu is ready. Now it’s time to create a popup.
Step 3:
Create a popup
Why do we need to create a popup? Well, this popup will contain the menu!
Go and select popup under the templates tab on the wp-admin sidebar. Then click on the green “add new popup” button.
Make sure “popup” is selected in the type of template dropdown. And give it a name. Like “popup”.
You can cross out this modal window and create the popup from scratch. Instead of crossing out of the Elementor library window, you can also press the insert button on one of the popup templates that Elementor gives you.
Drag and drop the Elementor’s nav menu widget.
Select the menu that we created and customize the menu layout and how it would appear on the popup.
Now go to the page settings tab and turn off the close button toggle. This will hide the close button from the page until the hamburger icon is clicked.
Now, when you click the publish button, you will see the conditions window. Click on the grey “add condition” button and make sure “entire site” is selected from the dropdown.
Then click on the Next button. This will bring you to the triggers page where you can set the triggers for your popup.
Clicking again on the Next button brings you to the advanced rules page where you can set advanced rules for your triggers.
Customize both the settings to your liking, then press the save and close button.
That’s it. Your popup is live.
Step 4:
Adding the Animated Hamburger Icon on an Elementor page.
This widget requires Unlimited Elements FREE version installed and activated on your WordPress website. We did this on the very first step already. So we will jump straight into adding our header where our hamburger menu icon will be at.
Drag and drop the animated hamburger widget on the page.
Select which style of animation you want from the dropdown. Preview the animation by clicking on the hamburger menu on the page.
You can use the alignment dropdown to position the hamburger to the left, right, or center of the page. You can skip this part if you later want to use the position fixed property in the advanced tab to make the hamburger icon sticky throughout the page.
Step 5:
Styling the Animated Hamburger widget
In the style tab, you can change the icon’s color using the “hamburger color” option and change the icon’s active color state using the “hamburger active color” option. You can also change the background color of the hamburger icon using the “background-color” option.
The sliders are there to let you change the border radius of the icon’s background to round or square, the size of the icon (which includes the background), and the size of the actual inner hamburger icon.
Step 6:
Making the Hamburger Icon Sticky (optional)
We may sometimes want the hamburger icon to be accessible to the users while they scroll the page. For this we have to turn the position to fixed under the positioning settings in the advanced tab. This will make the hamburger icon sticky throughout the page.
There are horizontal and vertical orientation options to let you align the hamburger icon to the left or right edge of the screen and top or bottom edge of the screen.
You can then play with the offset slider to further position the hamburger icon on the page as per your liking. The first offset slider is for the horizontal axis and the next one is for the vertical axis.
One important tip: you should set the z-index of the widget to an arbitrary high value, like 100 or 999. You could even set it to just 5 or 10 if you are sure that no other widgets on your page have a z-index higher than that. This will make sure that the icon is always on top of all other widgets and thus clickable.
We’re done customizing our animated hamburger icon widget! One last thing before we publish!
Step 7:
Link the Animated Hamburger to Popup
Go back to the animated hamburger widget settings and in the link box click the dynamic field icon on the right side of the gear icon.
Select the popup from the actions subheading.
Then click on the wrench icon. From there, select “toggle popup” from the actions dropdown.
Select the popup dropdown right below it and enter the name of the menu template which you created.
And voilà! Clicking on your animated hamburger icon now shows the menu.
