Spinning Hamburger

Hi there,

The first thing to do is hook the required HTML into the mobile toggle.

1. Create a new Hook:
2. If you're using the regular menu, set the hook as generate_inside_mobile_menu. If you're using the Mobile Header, set the hook as "Custom Hook" and paste this hook: generate_inside_mobile_header_menu
3. Add your required HTML:

<div class="hamburger hamburger--spin">
    <div class="hamburger-box">
        <div class="hamburger-inner"></div>
    </div>
</div>

4. Set the Display Rules to the entire site.

Now let's add the CSS:

@media only screen and (max-width: 1023px) {

/*!
 * Hamburgers
 * @description Tasty CSS-animated hamburgers
 * @author Jonathan Suh @jonsuh
 * @site https://jonsuh.com/hamburgers
 * @link https://github.com/jonsuh/hamburgers
 */
.hamburger {
  padding: 15px 15px;
  display: inline-block;
  cursor: pointer;
  transition-property: opacity, filter;
  transition-duration: 0.15s;
  transition-timing-function: linear;
  font: inherit;
  color: inherit;
  text-transform: none;
  background-color: transparent;
  border: 0;
  margin: 0;
  overflow: visible; }
  .hamburger:hover {
    opacity: 0.7; }
  .hamburger.is-active:hover {
    opacity: 0.7; }
  .hamburger.is-active .hamburger-inner,
  .hamburger.is-active .hamburger-inner::before,
  .hamburger.is-active .hamburger-inner::after {
    background-color: #000; }

.hamburger-box {
  width: 40px;
  height: 24px;
  display: inline-block;
  position: relative; }

.hamburger-inner {
  display: block;
  top: 50%;
  margin-top: -2px; }
  .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
    width: 40px;
    height: 4px;
    background-color: #000;
    border-radius: 4px;
    position: absolute;
    transition-property: transform;
    transition-duration: 0.15s;
    transition-timing-function: ease; }
  .hamburger-inner::before, .hamburger-inner::after {
    content: "";
    display: block; }
  .hamburger-inner::before {
    top: -10px; }
  .hamburger-inner::after {
bottom: -10px; }
    
/*
   * Spin
   */
.hamburger--spin .hamburger-inner {
  transition-duration: 0.22s;
  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  .hamburger--spin .hamburger-inner::before {
    transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in; }
  .hamburger--spin .hamburger-inner::after {
    transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19); }

.toggled .hamburger--spin .hamburger-inner {
  transform: rotate(225deg);
  transition-delay: 0.12s;
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  .toggled .hamburger--spin .hamburger-inner::before {
    top: 0;
    opacity: 0;
    transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out; }
  .toggled .hamburger--spin .hamburger-inner::after {
    bottom: 0;
    transform: rotate(-90deg);
transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); }
    
}

/* GP specific */

.hamburger {
	padding: 0;
}

.menu-toggle .gp-icon,
.menu-toggle:before {
    display: none;
}

.hamburger-box {
	width: 20px;
	height: 16px;
	top: 3px;
}

.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
	width: 20px;
	height: 1px;
	background-color: #fff;
}

.hamburger-inner::before {
	top: -5px;
}

.hamburger-inner::after {
	bottom: -5px;
}

Hello Tom,

your solution worked like a charm with the custom hook! Thank you very much for the outstanding support!

Regards,
Alexander

Glad I could help :)

It works for me as well, but how to change the size of the hamburger?

Can you link me to the page in question?

Feel free to open a new topic so you can use the private URL field.

Hi, thanks for the code & instructions for the spinning burger menu.
I am, like Yaroslav, looking for a way to make the burger (and the X) bigger (also: why once you click on the menu and then close it the "lines" are thinner than before?) and increase the space between the "lines".

here's the link

thank you!
Davide

Hi there,

We actually have an updated doc article on this here: https://docs.generatepress.com/article/animated-hamburgers/

Then you can use the transform: scale(x) property to change the size.

Perfect, thanks Tom!
just a note (is not specified in the link you posted): don't remember to change the class of the desired effect in the part of code below (unlike I did ;) :D )

function tu_add_animated_hamburger_markup() {
	?>
	    <div class="hamburger hamburger--collapse">
	        <div class="hamburger-box">
	            <div class="hamburger-inner"></div>
	        </div>
	    </div>
	<?php
}

Glad it helped! :)