Fix scrolling windows when mobile menu is opened

js/navigation.js

@@ -5,7 +5,7 @@
  * navigation support for dropdown menus.
  */
 ( function() {
-	var container, button, menu, links, i, len;
+	var container, button, menu, links, i, len, body;
 
 	container = document.getElementById( 'site-navigation' );
 	if ( ! container ) {
@@ -34,15 +34,15 @@
 
 		if ( -1 !== container.className.indexOf( 'toggled' ) ) {
 			container.className = container.className.replace( ' toggled', '' );
+			jQuery('html').add('body').removeClass('mobile-menu-opened');
 			button.setAttribute( 'aria-expanded', 'false' );
 			menu.setAttribute( 'aria-expanded', 'false' );
-			//jQuery('body').css('position', 'relative');
 
 		} else {
 			container.className += ' toggled';
+			jQuery('html').add('body').addClass('mobile-menu-opened');
 			button.setAttribute( 'aria-expanded', 'true' );
 			menu.setAttribute( 'aria-expanded', 'true' );
-			//jQuery('body').css('position', 'fixed');
 		}
 	};
 

sass/responsive.scss

@@ -77,13 +77,20 @@ Custom media queries
 
 // Medium devices (tablets, less than 992px)
 @media (max-width: 991.98px) {
+	.mobile-menu-opened {
+		margin: 0;
+		height: 100%;
+		overflow: hidden;
+	}
 	#site-navigation {
 		float: right;
 	}
 	.site-header.center_logo_navigation_below .header-sidebar {
 		text-align: initial;
 	}
-
+	.site-header .header-sidebar {
+		margin-top: 30px;
+	}
 	#primary-nav-menu {
 		display: none;
 	}
@@ -134,7 +141,7 @@ Custom media queries
 	.header-contents {
 		&.left-toggle {
 			.site-branding {
-				margin-left: 45px;
+				margin-left: 60px;
 			}
 			.menu-toggle {
 				left: 30px;

sass/style.scss

@@ -5,7 +5,7 @@ Author: YITH
 Author URI: https://yithemes.com
 Description: Proteo is a sleek, modern and “Gutenberg-friendly” e-commerce theme. Developed with a beautiful UI and a minimal design, is perfect for each kind of shop. Easy to manage and to customize, Proteo is the best solution if you want a complete e-commerce template and start quickly to sell your products with WooCommerce without a technical knowledge. Use it also for corporate site or a blog: there are no limits about what you can do with a beautiful and usable theme like this! Main features: Colors and Typography customization (Google font support), Logo customization, 3 different Header layouts, Advanced customizer theme options, Sidebar Management, Sidebar Chooser on each page and product, Page title icons, Top Bar Management, Easy main color shade chooser, Buttons style management (gradient buttons support), Footer management with multiple sidebars, WooCommerce support, Shop Theme Options, Custom WooCommerce messages and animated WooCommerce alert notices, Two cart page layouts, Bootstrap grid system, CSS animations, Gutenberg support, Responsive, Fullscreen search, Multilevel menus, Support to all YITH plugins, SVG icons for HiDPI screens, Translation Ready. <a href="https://proteo.yithemes.com/about-proteo/" rel="nofollow" target="_blank">Discover more ></a> | <a href="https://proteo.yithemes.com/" rel="nofollow" target="_blank">Check our live demo ></a>
 
-Version: 1.3.3.4
+Version: 1.3.3.6
 License: GPLv2 or later
 License URI: http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain: yith-proteo