[Support request] Replacing GP mobile menu with CSS animated hamburger

[Carl]

I want to replace my current GP menu with one a Jonsuh.com mobile menu: Tasty CSS animated hamburgers. In short, I don’t want to crash Site. I’ve got limited experiece.

[Tom]

Hi there,

The first thing you’ll want to do is load their CSS: https://github.com/jonsuh/hamburgers

Ideally, you only want to load the effect you’re wanting to achieve.

For example:

/*!
 * 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; }

/*
   * Collapse
   */
.hamburger--collapse .hamburger-inner {
  top: auto;
  bottom: 0;
  transition-duration: 0.13s;
  transition-delay: 0.13s;
  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  .hamburger--collapse .hamburger-inner::after {
    top: -20px;
    transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0.1s linear; }
  .hamburger--collapse .hamburger-inner::before {
    transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); }

.hamburger--collapse.is-active .hamburger-inner {
  transform: translate3d(0, -10px, 0) rotate(-45deg);
  transition-delay: 0.22s;
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  .hamburger--collapse.is-active .hamburger-inner::after {
    top: 0;
    opacity: 0;
    transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0.1s 0.22s linear; }
  .hamburger--collapse.is-active .hamburger-inner::before {
    top: 0;
    transform: rotate(-90deg);
    transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1); }

Then, you need to overwrite the GP menu icon with the necessary HTML, and add javascript so it all works:

add_action( 'generate_inside_mobile_menu', function() {
?>
    <div class="hamburger hamburger--collapse">
        <div class="hamburger-box">
            <div class="hamburger-inner"></div>
        </div>
    </div>
<?php
} );

add_action( 'wp_footer', function() {
?>
	<script>
	var hamburger = document.querySelector(".hamburger"),
		menuToggle = document.querySelector( '.menu-toggle' ),
		menuItems = document.querySelectorAll( 'nav ul a' ),
		closeElements = document.querySelectorAll( '.slideout-overlay, .slider-exit a' );

	menuToggle.addEventListener("click", function() {
		hamburger.classList.toggle("is-active");
	} );

	for ( var i = 0; i < closeElements.length; i++ ) {
		closeElements.addEventListener( 'click', function( e ) {
				hamburger.classList.toggle("is-active");
		} );
	};

	for ( var i = 0; i < menuItems.length; i++ ) {
		menuItems.addEventListener( 'click', function( e ) {
			var closest_nav = this.closest( 'nav' );
			if ( closest_nav.classList.contains( 'toggled' ) || htmlEl.classList.contains( 'slide-opened' ) ) {
				var url = this.getAttribute( 'href' );
				var hash = url.split('#')[1];

				// Open the sub-menu if the link has no destination
				if ( hash ) {
					e.preventDefault();
					hamburger.classList.toggle("is-active");
				}
			}
		}, false );
	}
	</script>
<?php
} );

Lastly, you need some custom CSS to style things appropriately:

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

.menu-toggle .hamburger{
  transform: scale(.5);
    padding: 0;
}

.menu-toggle .hamburger.is-active .hamburger-inner::after,
.menu-toggle .hamburger-inner, .menu-toggle .hamburger-inner::before, 
.menu-toggle .hamburger-inner::after,
.menu-toggle .hamburger.is-active .hamburger-inner, 
.menu-toggle .hamburger.is-active .hamburger-inner::before,
.menu-toggle .hamburger.is-active .hamburger-inner::after{
    background-color: currentColor;
}

[nik9]

Hi Tom,

I also want to do this. But I want to ask you if there is a another way in GP to do that? Maybe there is a GP solution available?

Cheers

[Leo]

No there isn’t anything built-in.

Here is the full solution here:
https://docs.generatepress.com/article/animated-hamburgers/

[Author]

Posts