lock scroll when mobile menu is open

dalston/style-rtl.css

@@ -4371,6 +4371,12 @@ a {
 	.mobile-nav-side.admin-bar.has-marketing-bar .site-header #site-navigation.main-navigation #toggle:checked + label {
 		top: 107px;
 	}
+	.lock-scrolling .site {
+		right: 0;
+		max-width: 100%;
+		position: fixed;
+		left: 0;
+	}
 }
 
 @media only screen and (max-width: 559px) {

dalston/style.css

@@ -4400,6 +4400,12 @@ a {
 	.mobile-nav-side.admin-bar.has-marketing-bar .site-header #site-navigation.main-navigation #toggle:checked + label {
 		top: 107px;
 	}
+	.lock-scrolling .site {
+		left: 0;
+		max-width: 100%;
+		position: fixed;
+		right: 0;
+	}
 }
 
 @media only screen and (max-width: 559px) {

varia/functions.php

@@ -247,6 +247,9 @@ function varia_scripts() {
 	if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
 		wp_enqueue_script( 'comment-reply' );
 	}
+
+	// Main navigation scripts
+	wp_enqueue_script( 'varia-primary-navigation-script', get_template_directory_uri() . '/js/primary-navigation.js', array(), wp_get_theme()->get( 'Version' ), true );
 }
 add_action( 'wp_enqueue_scripts', 'varia_scripts' );
 

varia/js/primary-navigation.js

@@ -0,0 +1,39 @@
+/**
+ * File primary-navigation.js.
+ *
+ * Locks scroll when the menu is opened on mobile
+ */
+( function() {
+
+	/**
+	 * Menu Toggle Behaviors
+	 *
+	 * @param {Element} element
+	 */
+	var navMenu = function ( id ){
+		var wrapper         = document.body; // this is the element to which a CSS class is added when a mobile nav menu is open
+
+			if (wrapper.classList.contains('mobile-nav-side')) {
+
+			var toggleButton    	= document.getElementById( 'toggle-menu' );
+			var toggleInput    	= document.getElementById( 'toggle' );
+
+			if ( toggleButton ){
+				toggleButton.onclick = function() {
+					if (toggleInput.checked == true){
+						wrapper.classList.remove( `${ id }-navigation-open` );
+						wrapper.classList.remove( 'lock-scrolling' );
+					} else {
+						wrapper.classList.add( `${ id }-navigation-open` );
+						wrapper.classList.add( 'lock-scrolling' );	
+					}
+					toggleButton.focus();
+				}		
+			}
+		}
+	}
+
+	window.addEventListener( 'load', function() {
+		new navMenu( 'primary' );
+	});
+} )();

varia/sass/components/header/_site-mobile-nav-side.scss

@@ -141,5 +141,14 @@ $wpadmin-bar--height: 46px;
 			}
 		}
 	}
+
+	// Keep the menu pinned to the top when the menu is open.
+	.lock-scrolling .site {
+		left: 0;
+		max-width: 100%;
+		position: fixed;
+		right: 0;
+	}
+
 }