How To Add CSS Animation Effects To Your Mobile Hamburger Menu Icons

Someone posted a link to the following page in the Beaver Builder Facebook group regarding Hamburger Icon Animations:

The instant I saw it I knew I had to implement that into Dynamik! 😀 Especially with the recent 2.1.0 update which added the Responsive “Vertical Toggle” menu shortcodes feature which allows you to easily add custom content to those responsive menus, it was a not brainer.

Tools Used:

To make this easier for you to implement and start playing with right away I created a Custom Dynamik Skin (linked to at the bottom of this post) that is simply the default Dynamik design, but with the custom code included.

So in the following screencast I walk you through how the code works as well as how to implement it either through a Dynamik Skin or through the Dynamik Custom Options (which should help if you want to implement it through other tools and themes):

The Code…

CSS:

PHP:

JS:

Custom Dynamik Skin

Leave a Reply