Enable scrolling in opened mobile navigation (#768)

verdigado · Nov 13, 2024 · 1bfda23 · 1bfda23
1 parent 1f45be3
commit 1bfda23
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 15 deletions.
diff --git a/assets/js/frontend.js b/assets/js/frontend.js
@@ -208,4 +208,16 @@ jQuery( '.dropdown .dropdown-toggle' ).on( 'click', function () {
 
 	return false;
 } );
+
+jQuery( function () {
+	jQuery( '.navbar-toggler' ).click( function () {
+		if ( jQuery( '.navbar-toggler' ).hasClass( 'collapsed' ) ) {
+			window.setTimeout( () => {
+				jQuery( 'body' ).removeClass( 'navbar-open' );
+			}, 100 );
+		} else {
+			jQuery( 'body' ).addClass( 'navbar-open' );
+		}
+	} );
+} );
 /* eslint-enable no-undef */
diff --git a/sass/_navigation.scss b/sass/_navigation.scss
@@ -1,3 +1,7 @@
+body.navbar-open {
+    overflow: hidden;
+}
+
 @include media-breakpoint-up(lg) {
 
     .navbar {
@@ -334,7 +338,6 @@
             border-radius: 4px;
             margin-right: 0;
             margin-top: -4px;
-            overflow: hidden;
             list-style-type: none;
             background-color: $white;
             padding: 0;
@@ -419,6 +422,9 @@
     &.collapsing,
     &.collapse.show {
 
+        max-height: 90vh;
+        overflow: auto;
+
         .navbar-nav {
             align-items: normal;
 

diff --git a/template-parts/header-personal.php b/template-parts/header-personal.php
@@ -81,17 +81,3 @@
 			?>
 		</div>
 	</nav>
-
-	<script>
-		jQuery(document).ready( function (){
-			jQuery('.navbar-toggler').click(function(){
-				if(jQuery('.navbar-toggler').hasClass('collapsed')) {
-					window.setTimeout(() => {
-						jQuery('body').removeClass('navbar-open');
-					}, 100);
-				} else{
-					jQuery('body').addClass('navbar-open');
-				}
-			})
-		})
-	</script>