Fix mobile navigation bar responsiveness by Sachindu-Nethmin · Pull Request #592 · wso2/docs-integrator

Sachindu-Nethmin · 2026-07-15T09:19:48Z

Purpose

Resolves #241
The navigation bar on smaller screens (mobile) was not fully responsive and the mobile sidebar was visually clipped.

Before

After

Goals

To ensure that the mobile sidebar fully expands and all menu items are visible without being clipped.

Approach

The issue was caused by backdrop-filter in the .navbar CSS class, which created a new containing block for the fixed mobile sidebar in Docusaurus. The solution conditionally removes backdrop-filter on .navbar when the mobile sidebar is active using a bulletproof :has() selector.

User stories

N/A

Release note

Fix mobile navigation bar and sidebar responsiveness.

Documentation

N/A. This is a fix for the documentation site UI itself.

Training

N/A

Certification

N/A

Marketing

N/A

Automation tests

Unit tests
N/A
Integration tests
N/A

Security checks

Followed secure coding standards in http://wso2.com/technical-reports/wso2-secure-engineering-guidelines? yes
Ran FindSecurityBugs plugin and verified report? N/A
Confirmed that this PR doesn't commit any keys, passwords, tokens, usernames, or other secrets? yes

Samples

N/A

Related PRs

N/A

Migrations (if applicable)

N/A

Test environment

Tested locally on macOS using Chrome and mobile viewport sizes (375px width).

Learning

Investigated how backdrop-filter creates a stacking context for fixed elements, affecting Docusaurus's mobile sidebar.

Summary by CodeRabbit

Bug Fixes
- Improved navbar display when the sidebar is open by removing the frosted-glass effect for clearer, more consistent navigation.

coderabbitai · 2026-07-15T09:21:02Z

Warning

Review limit reached

@Sachindu-Nethmin, you've reached your PR review limit, so we couldn't start this review.

Next review available in: 38 minutes

Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available.
You're only billed for reviews past your plan's rate limits ($0.25/file).

How can I continue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews.

How do review limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window.

Please refer docs for additional details.

Review details

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: ad88d156-1bf8-4c38-8723-000de5e8ab46

📥 Commits

Reviewing files that changed from the base of the PR and between 5567930 and 4c38088.

📒 Files selected for processing (1)

en/src/css/custom.css

📝 Walkthrough

Walkthrough

The navbar CSS now disables standard and WebKit backdrop filters on body, html, and .navbar while .navbar-sidebar--show is present.

Changes

Navbar responsiveness

Layer / File(s)	Summary
Disable backdrop filtering for open sidebar `en/src/css/custom.css`	Adds a `:has(.navbar-sidebar--show)` override that removes both backdrop-filter variants from the page and navbar elements.

Estimated code review effort: 1 (Trivial) | ~2 minutes

Suggested reviewers: anuruddhal, anupama-pathirage, kavinduzoysa

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Linked Issues check	✅ Passed	The change addresses issue `#241` by making the mobile sidebar fully visible and removing the clipping behavior.
Out of Scope Changes check	✅ Passed	The PR contains a focused CSS fix that is directly related to the reported mobile sidebar responsiveness issue.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Title check	✅ Passed	The title clearly summarizes the main change: fixing mobile navigation bar responsiveness.
Description check	✅ Passed	The description matches the template and covers purpose, goals, approach, testing, and required N/A sections.

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands.}

github-actions · 2026-07-15T09:55:49Z

Broken links, images & orphan pages

✅ Passing — no broken links or images found.

Links/images come from one crawl of the production build (baseUrl-aware). Orphans are docs not referenced by sidebars.ts.

Summary

Broken links & images — total 0 · 🆕 introduced 0 · 📄 already on main 0
Orphan pages — total 8 · 🆕 introduced 0 · 📄 already on main 8

Broken links & images

Introduced by this PR

No new broken link(s)/image(s) introduced by this PR. ✅

Already on `main` — 0 total

None.

Orphan pages

Introduced by this PR

No new orphan page(s) introduced by this PR. ✅

Already on `main` — 8 total

Already present on the base branch (not caused by this PR):

Show 8

docs/deploy-operate/observe/datadog-integration
docs/deploy-operate/observe/elastic-stack-elk
docs/deploy-operate/observe/metrics-prometheus-grafana
docs/deploy-operate/observe/opensearch-integration
docs/deploy-operate/observe/recipe-elk-stack
docs/deploy-operate/observe/recipe-kubernetes-production
docs/deploy-operate/observe/recipe-local-development
docs/deploy-operate/observe/recipe-opensearch-setup

Copilot

Pull request overview

Improves the Docusaurus docs site mobile UX by preventing the navbar’s backdrop-filter from interfering with the fixed-position mobile sidebar when the sidebar is open (per issue #241), eliminating the clipping behavior on smaller viewports.

Changes:

Adds a conditional CSS override to disable backdrop-filter / -webkit-backdrop-filter on .navbar while the mobile sidebar is shown.

dulajdilshan · 2026-07-16T09:18:29Z

I am not sure, this is the intended navigation menu user-interface - transparent navigation bar. However, this works

LGTM! @Sachindu-Nethmin Please check the Copilot comment.

Sachindu-Nethmin · 2026-07-16T09:49:44Z

I am not sure, this is the intended navigation menu user-interface - transparent navigation bar. However, this works
LGTM! @Sachindu-Nethmin Please check the Copilot comment.

I resolve the copilot comment and the remove the transparent. Please tell me if it need to revert or it looks better.

Fix mobile navbar responsiveness issue

5567930

Sachindu-Nethmin requested review from KavinduZoysa, NipunaRanasinghe, anupama-pathirage and rosensilva as code owners July 15, 2026 09:19

dulajdilshan requested a review from Copilot July 16, 2026 08:12

Copilot started reviewing on behalf of dulajdilshan July 16, 2026 08:12 View session

Copilot AI reviewed Jul 16, 2026

View reviewed changes

Comment thread en/src/css/custom.css Outdated

Sachindu-Nethmin added 3 commits July 16, 2026 15:04

Fix CSS selector for mobile sidebar backdrop-filter

8036423

Make mobile navbar opaque when sidebar is shown

eb36304

Make mobile sidebar menu opaque

4c38088

Navigation Menu

Uh oh!

Fix mobile navigation bar responsiveness - #592

Fix mobile navigation bar responsiveness#592
Sachindu-Nethmin wants to merge 4 commits into
wso2:mainfrom
Sachindu-Nethmin:mobile-responsive-sidebar

Sachindu-Nethmin commented Jul 15, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot commented Jul 15, 2026 •

edited

Loading

Review limit reached

Walkthrough

Changes

Uh oh!

github-actions Bot commented Jul 15, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

dulajdilshan commented Jul 16, 2026

Uh oh!

Sachindu-Nethmin commented Jul 16, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

Conversation

Sachindu-Nethmin commented Jul 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Purpose

Goals

Approach

User stories

Release note

Documentation

Training

Certification

Marketing

Automation tests

Security checks

Samples

Related PRs

Migrations (if applicable)

Test environment

Learning

Summary by CodeRabbit

Uh oh!

coderabbitai Bot commented Jul 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review limit reached

Walkthrough

Changes

Uh oh!

github-actions Bot commented Jul 15, 2026

Broken links, images & orphan pages

Summary

Broken links & images

Introduced by this PR

Already on main — 0 total

Orphan pages

Introduced by this PR

Already on main — 8 total

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

dulajdilshan commented Jul 16, 2026

Uh oh!

Sachindu-Nethmin commented Jul 16, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Sachindu-Nethmin commented Jul 15, 2026 •

edited

Loading

coderabbitai Bot commented Jul 15, 2026 •

edited

Loading

Already on `main` — 0 total

Already on `main` — 8 total