[Resolved] Animated hamburger with off-canvas panel – overlay

[Salty Communication]

Hello!

Just started a new website for a client and would like to add an animated hamburger icon all over the site, both mobile and desktop. Together with the overlay effect.
I have come a bit on the way, but right now I have two menus in the mobile view and it doesn’t animate on desktop.
Thanks in advance guys!

[Ying]

Hi there,

How did you add the animated hamburger icon?

[Salty Communication]

Hi!

I did use this guide:
https://docs.generatepress.com/article/animated-hamburgers/

[Fernando]

Hello there,

To clarify, did you add the Off canvas panel code?: https://docs.generatepress.com/article/animated-hamburgers/#off-canvas-panel

Can you double-check if all the necessary codes are added correctly?

[Salty Communication]

Yep, it is added 🙂

[David]

Hi there,

that method only works with the normal mobile menu, not the off canvas.

I have one alternative you can try.

1. Remove any code you have so far relating to the hamburger

2. Add this PHP Snippet:

add_filter( 'generate_svg_icon', function( $output, $icon ) {
    if ( 'pro-menu-bars' === $icon ) {
        $output = '<svg width="1em" height="1em" viewBox="0 0 100 100">
        <path class="line line1" d="M 20,29.000046 H 80.000231 C 80.000231,29.000046 94.498839,28.817352 94.532987,66.711331 94.543142,77.980673 90.966081,81.670246 85.259173,81.668997 79.552261,81.667751 75.000211,74.999942 75.000211,74.999942 L 25.000021,25.000058" />
        <path class="line line2" d="M 20,50 H 80" />
        <path class="line line3" d="M 20,70.999954 H 80.000231 C 80.000231,70.999954 94.498839,71.182648 94.532987,33.288669 94.543142,22.019327 90.966081,18.329754 85.259173,18.331003 79.552261,18.332249 75.000211,25.000058 75.000211,25.000058 L 25.000021,74.999942" />
        </svg>';
	
		$classes = array(
			'gp-icon',
			'icon-' . $icon,
		);
	
		return sprintf(
			'<span class="%1$s">%2$s</span>',
			implode( ' ', $classes ),
			$output
		);
	}

    return $output;
}, 15, 2 );

3. Add this CSS:

.slide-opened .icon-menu-bars svg:nth-child(1) {
    display: block;
}

.icon-menu-bars svg {
    font-size: 24px;
}

.line {
  fill: none;
  stroke: currentcolor;
  stroke-width: 6;
  transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1),
      stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

.line1 {
  stroke-dasharray: 60 207;
  stroke-width: 6;
}

.line2 {
  stroke-dasharray: 60 60;
  stroke-width: 6;
}

.line3 {
  stroke-dasharray: 60 207;
  stroke-width: 6;
}

.slide-opened .line1 {
  stroke-dasharray: 90 207;
  stroke-dashoffset: -134;
  stroke-width: 6;
}

.slide-opened .line2 {
  stroke-dasharray: 1 60;
  stroke-dashoffset: -30;
  stroke-width: 6;
}

.slide-opened .line3 {
  stroke-dasharray: 90 207;
  stroke-dashoffset: -134;
  stroke-width: 6;
}

[Salty Communication]

Hey David,

Thanks! It works on desktop, but not on mobile.
And the animation is not the same, but it is animated and that is good 🙂 Is there somewhere I can see and choose a different animation?

[David]

Glad to hear that worked.

You need this CSS to hide the mobile menu and display the off canvas menu:

@media (max-width: 768px) {
    .menu-bar-item.slideout-toggle {
        display: block !important;
    }
    .main-navigation .menu-toggle {
        display: none !important;
    }
}

The original code i borrowed from this Code Pen:

https://codepen.io/ainalem/pen/LJYRxz

There are other SVGs and styles that you would need to swap out.

[Salty Communication]

Excellent. Thanks!

[David]

You’re welcome – did you get the overlay working as you need it ?

[Author]

Posts