🐞[Bug]: Hamburger Menu Appears but Doesn't Display Content Between 1300px and 996px Screen Width

[kanishka-commits]

Is there an existing issue for this?

• I have searched the existing issues

Describe the bug

Description:
When the screen width is below 1300px, the hamburger menu icon appears, but the navigation content (menu links) does not show up when clicked until the screen width drops below 996px.
This creates a non-responsive gap range where the navbar looks collapsed but the menu isn’t accessible.

Steps to Reproduce:

1. Resize the browser window to around 1200px width.
2. Observe that the hamburger icon appears.
3. Click on the icon — the menu content does not expand or appear.
4. Continue resizing below 996px — the menu finally becomes functional.

Expected behavior

The hamburger menu should display the navigation content as soon as it appears (i.e., below 1300px), ensuring consistent responsiveness across screen sizes.

Add ScreenShots

Screen.Recording.2025-10-22.at.9.04.26.PM.mov

What browsers are you seeing the problem on?

Chrome

Record

• I have read the Contributing Guidelines
• Are you a GSSOC'25 contributor
• I want to work on this issue

[github-actions]

Thanks for opening this issue! 🎉 We'll look into it as soon as possible, estimated time for response is 5–8 hrs.

Don't raise PR unless assigned to you.

In the meantime, please provide all necessary details and context to your issue — screenshots or videos of your changes help speed up the review and assignment. If you have questions, reach out to LinkedIn. Your contributions are highly appreciated!😊

Note: I maintain the repo issue every day twice at 8:00 AM IST and 9:00 PM IST. If your issue goes stale for more than one day, you can tag and comment on this same issue by tagging @sanjay-kv.

We are here to help you on this journey of open source. Consistent contributions are eligible for sponsorship 💰

🎁 check our list of amazing people we sponsored so far: GitHub Sponsorship. ✨

📚Resources which can help you know more about Github 👇🏻

1. End to End GitHub Beginner Playlist: GitHub Playlist.

2. Build your GitHub Profile: GitHub Profile Optimisation.

3. GitHub Handbook for dummies: GitHub Blog for Beginners.

[github-actions]

👤 Issue assigned to @kanishka-commits.

[kanishka-commits]

I've looked into this issue. By default, Docusaurus uses a 996px breakpoint for its classic theme navbar, and even reading issue #9603 (facebook/docusaurus#9603) didn't help much in cleanly overriding it to 1299px.

---

As a more stable fix, I'm adding a media query to hide the "Sign in with GitHub" text on screens smaller than 1110px. This fixes the layout overflow by only showing the logo and avoids fighting the default breakpoint.

Screen.Recording.2025-10-24.at.12.16.52.AM.mov

Is it okay to go with this approach, if it looks good to you?

[sanjay-kv]

@kanishka-commits just wanna check as sign in with github is core functionality , can we hide logo inside

[sheikhlimon]

@kanishka-commits it's nice you're working on this.. and you can keep working on it but this a duplicate of #701 .. So do check the hamburger menu on medium screen if you change media query. It tends to break the logo for some reason. Also check the drop-down links as well see if they are aligned well on regular size screen.

[kanishka-commits]

@kanishka-commits just wanna check as sign in with github is core functionality , can we hide logo inside

Sure, I was thinking — if it’s a core functionality, we should let it stay in the main navbar even for smaller viewports.

In the current codebase, the GitHub sign-in button isn’t available for items inside the hamburger menu, nor in the main navbar near the dark mode toggle.

Suggestion: It should remain near the theme toggle (in main Navbar) even for smaller viewports.

[kanishka-commits]

@sheikhlimon
You're spot on. I was originally trying to fix that unresponsive viewport gap, but as you know from #701, it's a hard-to-get fix.

Since you've already dealt with this, I'll follow your lead and pivot to a different approach to avoid those breakages. My current plan is just to hide the "Sign in with GitHub" text on smaller screens to fix the overflow, rather than fighting the default breakpoint.

If you come across any other slick way to tackle this, definitely let me know!