Off Canvas TEST PAGE

Trying to have the hamburger icon replaced and be animated on both Desktop and Mobile version of the site using the same Off Canvas menu for all media queries. We use the code from https://docs.generatepress.com/article/animated-hamburgers.

All the modifications and additional code are marked with “modified/added by Tom”.

NOTES:

The Mobile Breakpoint is set to 2000.

Mobile Header is off, Navigation as Header is on.

PHP (three snippets)

Snippet 1 (modified by Tom)

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

Snippet 2

add_action( 'wp_footer', function() {
?>
	<script>
	var hamburgers = document.querySelectorAll(".hamburger"),
		menuToggle = document.querySelector( '.menu-toggle' ),
		menuItems = document.querySelectorAll( 'nav ul a' ),
		htmlEl = document.documentElement;

	menuToggle.addEventListener("click", function() {
		for ( var h = 0; h < hamburgers.length; h++ ) {
			hamburgers[h].classList.toggle("is-active");
		}
	} );

	for ( var i = 0; i < menuItems.length; i++ ) {
		menuItems[i].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 ( '#' === url ) {
					e.preventDefault();
					for ( var h = 0; h < hamburgers.length; h++ ) {
						hamburgers[h].classList.toggle("is-active");
					}
				}
			}
		}, false );
	}

        var checkHamburgers = function() {
            var openedMobileMenus = document.querySelectorAll( '.toggled, .has-active-search' );

            for ( var i = 0; i < openedMobileMenus.length; i++ ) {
                var menuToggle = openedMobileMenus[i].querySelector( '.menu-toggle' );

                if ( menuToggle && menuToggle.offsetParent === null ) {
                    if ( openedMobileMenus[i].classList.contains( 'toggled' ) ) {
                        var hamburgers = document.querySelectorAll(".hamburger");

                        for ( var h = 0; h < hamburgers.length; h++ ) {
                            hamburgers[h].classList.remove("is-active");
                        }
                    }
                }
            }
        }
        window.addEventListener( 'resize', checkHamburgers, false );
        window.addEventListener( 'orientationchange', checkHamburgers, false );
	</script>
<?php
} );

Snippet 3

add_action( 'wp_enqueue_scripts', function() {
	$script =
		'var slideoutToggles = document.querySelectorAll( ".slideout-toggle a" ),
			 hamburgers = document.querySelectorAll( ".hamburger" ),
			 closeElements = document.querySelectorAll( ".slideout-overlay, .slideout-exit" );

		for ( var i = 0; i < slideoutToggles.length; i++ ) {
			slideoutToggles[i].addEventListener( "click", function( e ) {
				for ( var h = 0; h < hamburgers.length; h++ ) {
					if ( ! hamburgers[h].classList.contains( "is-active" ) ) {
						hamburgers[h].classList.add("is-active");
					}
				}
			} );
		};

		for ( var e = 0; e < closeElements.length; e++ ) {
			closeElements[e].addEventListener( "click", function( e ) {
				for ( var h = 0; h < hamburgers.length; h++ ) {
					hamburgers[h].classList.remove("is-active");
				};
			} );
		};';

	wp_add_inline_script( 'generate-offside', $script );
} );

CSS (five blocks)

CSS block 1

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

CSS block 2

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

body .hamburger{
    transform: scale(.5);
    padding: 0;
    line-height: 0;
    vertical-align: middle;
}

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

CSS block 3

.slideout-toggle a:before,
.slide-opened .slideout-exit:not(.has-svg-icon):before,
.slideout-navigation button.slideout-exit:not(.has-svg-icon):before {
	display: none !important;
}

CSS block 4 (added by Tom)


.menu-bar-item.slideout-toggle {
    display: none;
}