Introduction:
We are going over the mobile menu animation on our website!
Divi is a very powerful tool, but it lacks many settings you see in other themes.
Adding a mobile menu animation is a great subtle way to have your website stand out.
Solution:
Adding an animation is actually very simple, all you need to do is add our snippets of code to two sections within divi’s settings. You can tweak the color with the CSS value background-color under .snazzy_hamburger_menu div {
There are two parts to the code.
CSS to stylize / animate.
Javascript to replace Divi’s hamburger with 3 <div> lines.
/wp-admin > Divi> Scroll Down > Custom CSS
/wp-admin > Divi> Integrations > Add code to the < head > of your blog
CSS:
JavaScript:
/* snazzy Menu animation made by Jacob at http://www.snazzy.solutions/ Loosely based off ET's Custom Menu Animations Plugin*/ .snazzy_hamburger_menu { position: relative; display: block; width: 1.875rem; height: 1.875rem; box-sizing: border-box; cursor: pointer; padding: 0.25rem; clear: both; } .snazzy_hamburger_menu div { background-color: #6ccdd3; width: 100%; height: 0.125rem; margin: 0.25rem auto; border-radius: 10px; transition: 0.6s cubic-bezier(0.28, 0.55, 0.385, 1.65); transition-timing-function: cubic-bezier(0.28, 0.55, 0.385, 1.65); transform: 0; transform-origin: center; } .snazzy_hamburger_menu.snazzy_hamburger_menu--toggled div:first-child { transform: translateY(0.375rem) rotate(45deg); } .snazzy_hamburger_menu.snazzy_hamburger_menu--toggled div:not(:first-child):not(:last-child) { opacity: 0; /* Hide Middle Line*/ } .snazzy_hamburger_menu.snazzy_hamburger_menu--toggled div:last-child { transform: translateY(-0.375rem) rotate(-45deg); } .mobile_menu_bar { padding-bottom: 0; margin-bottom: 26px; } .mobile_menu_bar:before { display: none; }
<script> jQuery(document).ready(function ($) { // Finds .mobile_menu_bar_toggle class // Adds new class $(".mobile_menu_bar_toggle") .addClass("snazzy_hamburger_menu") .html('<div></div><div></div><div></div>'); // Gets theme Accent Color var accentColor = $("a").css("color"); // Append accent color style block $('<style> .snazzy_hamburger_menu div {background: ' + accentColor + '} .snazzy_hamburger_menu--type-2 .snazzy_hamburger_menu div, .snazzy_hamburger_menu--type-3 .snazzy_hamburger_menu div {background: 0; } .snazzy_hamburger_menu--type-2 .snazzy_hamburger_menu div:before, .snazzy_hamburger_menu--type-2 .snazzy_hamburger_menu div:after, .snazzy_hamburger_menu--type-3 .snazzy_hamburger_menu div:before, .snazzy_hamburger_menu--type-3 .snazzy_hamburger_menu div:after {background: ' + accentColor + '} </style>').appendTo('body'); // Menu click event $('.snazzy_hamburger_menu').on('click', function(e) { e.preventDefault(); $(this).toggleClass('snazzy_hamburger_menu--toggled'); }); $('.toggle_all').on('click', function(e) { e.preventDefault(); $('.snazzy_hamburger_menu').toggleClass('snazzy_hamburger_menu--toggled'); }); }); </script>