fbpx

Tutorial: Divi Mobile Menu Animation

Written by Jacob

07/08/2020

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>