Features Hamburger menu animations
PRO FEATURE26 animated hamburger menu buttons for WordPress
Tap any button below to see it open and close. Pick one in Responsive Menu Pro and your mobile menu button uses it on every page.
See Pro plans From $49 a year · 14-day refund policy
- Boring
- 3DX
- 3DX Reverse
- 3DY
- 3DY Reverse
- Arrow
- Arrow Reverse
- Arrow Alt
- Arrow Alt Reverse
- Collapse
- Collapse Reverse
- Elastic
- Elastic Reverse
- Emphatic
- Emphatic Reverse
- Minus
- Slider
- Slider Reverse
- Spin
- Spin Reverse
- Spring
- Spring Reverse
- Stand
- Stand Reverse
- Squeeze
- Vortex
- Vortex Reverse
Boring is in the free plugin; the other 26 are Pro. These are the real animations from Responsive Menu Pro, at the default line size.
Make the button match your site
Every animation works with all the button settings. Change them in the live editor and check the phone preview before you publish.
- Colours for every stateLine colour when closed, hovered and open, plus a background colour or a transparent button.
- Size and spacingSet the button size, and the width, thickness and spacing of the lines.
- PositionLeft or right side, any distance from the edge, fixed while scrolling or scrolling with the page.
- A label next to the iconAdd text such as “Menu” beside the button, with different text when it's open.
Set it up in three steps
- 1
Open the toggle button settings
In Responsive Menu, go to Mobile Menu, then Toggle Button.
- 2
Choose an animation
Under Button Type, pick any animation. The phone preview plays it as you choose.
- 3
Style it and save
Set the colours and size, check the preview, then save. It's live on every page.
Hamburger animation questions
Are the animations in the free plugin?
The free plugin has one simple animation (Boring). The other 26 on this page are part of Responsive Menu Pro, on every plan from $49 a year.
Do I need to write any CSS?
No. You pick an animation from a dropdown in the plugin settings, and the phone preview shows it straight away.
Can I change the colours and size of the button?
Yes. You can set the line colour for the normal, hover and open states, the button background (or make it transparent), and the line width, thickness and spacing.
Where can the button sit on the page?
On the left or right, at any distance from the side and top. Fixed keeps it in place as visitors scroll; you can also let it scroll away with the page.
Will the animations slow my site down?
They are CSS transitions on the existing button, so they add no images and no extra requests.
Read more: Toggle button guide · How to change the hamburger icon animation · What is a hamburger menu?