This members-only tutorial extends the previous Toggleable Modal Trigger tutorial and shows how to animate the hamburger menu icon between its regular state and a X icon using the CSS-animated hamburgers.

Step 1

Implement the Toggleable Modal Trigger in Oxygen tutorial.

Step 2

Delete the Menu icon and move the Code Block from Step 1c of the earlier tutorial in its place.

In the PHP & HTML area, add:

This is a premium members-only content.

To view the rest of the content, please sign up for membership ($37/month or $399 one-time).

Already a member? Log in below or here.

Need help implementing a tutorial in your site or want to hire me for custom work?


Find the article helpful and wish to donate?



For adding code blocks wrap the code in three backticks. Markdown should work.
Provide a URL of your site/webpage if something is not working.

One comment on “Toggleable Modal Trigger with Animated Hamburger in Oxygen”

linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
%d bloggers like this: