From 7b4a488a3d0e2f56176493becb6ebfffb91f3e60 Mon Sep 17 00:00:00 2001 From: girishpanchal30 Date: Tue, 10 Feb 2026 19:11:33 +0530 Subject: [PATCH 1/3] fix: make navigation block responsive --- assets/css/src/blocks/_navigation.scss | 36 ++++++++++++++++++++++++++ 1 file changed, 36 insertions(+) diff --git a/assets/css/src/blocks/_navigation.scss b/assets/css/src/blocks/_navigation.scss index 9155a05..84c85f9 100644 --- a/assets/css/src/blocks/_navigation.scss +++ b/assets/css/src/blocks/_navigation.scss @@ -24,4 +24,40 @@ .wp-block-navigation__submenu-container { gap: 24px !important; } + + .wp-block-navigation__responsive-container-content { + + .wp-block-navigation-item { + display: flex; + justify-content: space-between; + flex-direction: row; + flex-wrap: wrap; + align-items: center; + padding: 0 24px; + width: 100vw; + } + + .has-child { + + .wp-block-navigation__submenu-container { + display: none; + } + + &:hover { + + .wp-block-navigation__submenu-container { + display: block; + width: 100%; + padding: 0; + padding-top: var(--wp--style--block-gap, 2em); + } + } + } + + .wp-block-navigation__submenu-icon { + display: inline-block; + cursor: pointer; + } + } + } From 1190cb36d9ae97e600977e7462a26ea526c292c6 Mon Sep 17 00:00:00 2001 From: girishpanchal30 Date: Tue, 10 Feb 2026 19:21:14 +0530 Subject: [PATCH 2/3] fix: add box-sizing to navigation item for consistent layout --- assets/css/src/blocks/_navigation.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/assets/css/src/blocks/_navigation.scss b/assets/css/src/blocks/_navigation.scss index 84c85f9..b592f3e 100644 --- a/assets/css/src/blocks/_navigation.scss +++ b/assets/css/src/blocks/_navigation.scss @@ -35,6 +35,7 @@ align-items: center; padding: 0 24px; width: 100vw; + box-sizing: border-box; } .has-child { From 357f59301587f110fca85b4f920a433db973df5b Mon Sep 17 00:00:00 2001 From: girishpanchal30 Date: Fri, 13 Feb 2026 16:22:13 +0530 Subject: [PATCH 3/3] fix: navigation block in mobile view --- assets/css/src/blocks/_navigation.scss | 24 +++++++++--------------- assets/js/src/script.js | 7 +++++++ inc/Assets_Manager.php | 1 + inc/Core.php | 1 + 4 files changed, 18 insertions(+), 15 deletions(-) create mode 100644 assets/js/src/script.js diff --git a/assets/css/src/blocks/_navigation.scss b/assets/css/src/blocks/_navigation.scss index b592f3e..4b1821f 100644 --- a/assets/css/src/blocks/_navigation.scss +++ b/assets/css/src/blocks/_navigation.scss @@ -36,28 +36,22 @@ padding: 0 24px; width: 100vw; box-sizing: border-box; - } - - .has-child { .wp-block-navigation__submenu-container { display: none; } - &:hover { - - .wp-block-navigation__submenu-container { - display: block; - width: 100%; - padding: 0; - padding-top: var(--wp--style--block-gap, 2em); - } + .wp-block-navigation__submenu-icon { + display: inline-block; + cursor: pointer; } - } - .wp-block-navigation__submenu-icon { - display: inline-block; - cursor: pointer; + &.is-submenu-open > .wp-block-navigation__submenu-container { + display: block; + width: 100%; + padding: 0; + padding-top: var(--wp--style--block-gap, 2em); + } } } diff --git a/assets/js/src/script.js b/assets/js/src/script.js new file mode 100644 index 0000000..5acf5a6 --- /dev/null +++ b/assets/js/src/script.js @@ -0,0 +1,7 @@ +/* global jQuery */ + +jQuery( document ).ready( ( $ ) => { + $( '.wp-block-navigation-submenu__toggle' ).on( 'click', function () { + $( this ).parent( 'li' ).toggleClass( 'is-submenu-open' ); + } ); +} ); diff --git a/inc/Assets_Manager.php b/inc/Assets_Manager.php index 77542ec..bda65cc 100644 --- a/inc/Assets_Manager.php +++ b/inc/Assets_Manager.php @@ -20,6 +20,7 @@ class Assets_Manager { 'editor-css' => 'riverbank-editor', 'welcome-notice' => 'riverbank-welcome-notice', 'design-pack-notice' => 'riverbank-design-pack-notice', + 'frontend-js' => 'riverbank-script', ); /** diff --git a/inc/Core.php b/inc/Core.php index 7dc0c36..4a2328d 100644 --- a/inc/Core.php +++ b/inc/Core.php @@ -97,6 +97,7 @@ public function setup() { */ public function enqueue() { Assets_Manager::enqueue_style( Assets_Manager::ASSETS_SLUGS['frontend-css'], 'style' ); + Assets_Manager::enqueue_script( Assets_Manager::ASSETS_SLUGS['frontend-js'], 'script', true, array( 'jquery' ) ); } /**