From 2972e84d5b48251abff5f958d3e922025d4376d2 Mon Sep 17 00:00:00 2001 From: Davinder Singh Date: Wed, 9 Jul 2025 11:19:29 +0100 Subject: [PATCH] Home page burger menu scroll fix (#26853) * adding a scroll fix * generalising the solution so it works for both BS3 and BS5 GitOrigin-RevId: 8dd0d82356b484adcad9de487b12ecfc4050d109 --- .../app/views/layout/navbar-marketing-bootstrap-5.pug | 2 +- .../web/app/views/layout/navbar-website-redesign.pug | 2 +- services/web/frontend/js/bootstrap-3.ts | 1 + services/web/frontend/js/bootstrap-5.ts | 1 + services/web/frontend/js/features/navbar/index.ts | 9 +++++++++ .../stylesheets/bootstrap-5/components/navbar.scss | 5 +++++ services/web/frontend/stylesheets/components/navbar.less | 5 +++++ 7 files changed, 23 insertions(+), 2 deletions(-) create mode 100644 services/web/frontend/js/features/navbar/index.ts diff --git a/services/web/app/views/layout/navbar-marketing-bootstrap-5.pug b/services/web/app/views/layout/navbar-marketing-bootstrap-5.pug index 29b12a056d..9f9decbefb 100644 --- a/services/web/app/views/layout/navbar-marketing-bootstrap-5.pug +++ b/services/web/app/views/layout/navbar-marketing-bootstrap-5.pug @@ -36,7 +36,7 @@ nav.navbar.navbar-default.navbar-main.navbar-expand-lg( - var canDisplayScriptLogMenu = hasFeature('saas') && canDisplayAdminMenu if typeof suppressNavbarRight === 'undefined' - button.navbar-toggler.collapsed( + button#navbar-toggle-btn.navbar-toggler.collapsed( type='button' data-bs-toggle='collapse' data-bs-target='#navbar-main-collapse' diff --git a/services/web/app/views/layout/navbar-website-redesign.pug b/services/web/app/views/layout/navbar-website-redesign.pug index 0a8337c2f5..8963037758 100644 --- a/services/web/app/views/layout/navbar-website-redesign.pug +++ b/services/web/app/views/layout/navbar-website-redesign.pug @@ -2,7 +2,7 @@ nav.navbar.navbar-default.navbar-main.website-redesign-navbar .container-fluid .navbar-header if typeof suppressNavbarRight == 'undefined' - button.navbar-toggle.collapsed( + button#navbar-toggle-btn.navbar-toggle.collapsed( type='button' data-toggle='collapse' data-target='#navbar-main-collapse' diff --git a/services/web/frontend/js/bootstrap-3.ts b/services/web/frontend/js/bootstrap-3.ts index 2c7b3b8214..e9012b7555 100644 --- a/services/web/frontend/js/bootstrap-3.ts +++ b/services/web/frontend/js/bootstrap-3.ts @@ -2,3 +2,4 @@ import 'bootstrap' import './features/contact-form' import './features/bookmarkable-tab/index' import './features/tooltip/index-bs3' +import './features/navbar/index' diff --git a/services/web/frontend/js/bootstrap-5.ts b/services/web/frontend/js/bootstrap-5.ts index b9dc3d8679..4b4b09ecfe 100644 --- a/services/web/frontend/js/bootstrap-5.ts +++ b/services/web/frontend/js/bootstrap-5.ts @@ -1,3 +1,4 @@ import './features/bookmarkable-tab/index-bs5' import './features/tooltip/index-bs5' +import './features/navbar/index' import 'bootstrap-5' diff --git a/services/web/frontend/js/features/navbar/index.ts b/services/web/frontend/js/features/navbar/index.ts new file mode 100644 index 0000000000..706d4853f3 --- /dev/null +++ b/services/web/frontend/js/features/navbar/index.ts @@ -0,0 +1,9 @@ +const toggleButton = document.getElementById('navbar-toggle-btn') as HTMLElement + +toggleButton.addEventListener('click', () => { + // Delay allows Bootstrap to update aria-expanded first + setTimeout(() => { + const isExpanded = toggleButton.getAttribute('aria-expanded') === 'true' + document.body.classList.toggle('no-scroll', isExpanded) + }, 5) +}) diff --git a/services/web/frontend/stylesheets/bootstrap-5/components/navbar.scss b/services/web/frontend/stylesheets/bootstrap-5/components/navbar.scss index a8855ea1ca..3ec45aef2f 100644 --- a/services/web/frontend/stylesheets/bootstrap-5/components/navbar.scss +++ b/services/web/frontend/stylesheets/bootstrap-5/components/navbar.scss @@ -1,3 +1,8 @@ +.no-scroll { + height: 100vh; + overflow: hidden; +} + // Default navbar .navbar-default { background-color: var(--navbar-bg); diff --git a/services/web/frontend/stylesheets/components/navbar.less b/services/web/frontend/stylesheets/components/navbar.less index 06c3346a35..1a329e3ce1 100755 --- a/services/web/frontend/stylesheets/components/navbar.less +++ b/services/web/frontend/stylesheets/components/navbar.less @@ -7,6 +7,11 @@ // Provide a static navbar from which we expand to create full-width, fixed, and // other navbar variations. +.no-scroll { + height: 100vh; + overflow: hidden; +} + .navbar { position: relative; min-height: @navbar-height; // Ensure a navbar always shows (e.g., without a .navbar-brand in collapsed mode)