[FIX]: #1017 Hamburger Menu Appears but Doesn't Display Content Between 1300px and 996px Screen Width #1060

kanishka-commits · 2025-10-24T18:49:51Z

Description

Problem Summary

The issue was caused by a breakpoint mismatch between the custom CSS and Docusaurus’s default responsive behavior.
As a result, the hamburger menu appeared but did not function between screen widths of 1300px and 996px.

Why This Happened

In the custom stylesheet (Section 11), a media query @media (max-width: 1299px) was used to hide navbar items and show the hamburger icon.
However, Docusaurus’s internal logic only activates the mobile sidebar (the menu opened by the hamburger) at @media (max-width: 996px).
Between these two breakpoints (1300–996px), the hamburger button was visible but non-functional, since the mobile sidebar behavior wasn’t active yet.
This created a “dead zone” where navigation items were hidden and the hamburger didn’t respond — effectively breaking the navbar for medium-sized screens.

Solution Summary

The PR introduces a 3-step fix that completely resolves the dead zone and improves the overall responsiveness of the navbar.

1. Aligned Breakpoint (Core Fix)

Earlier

Screen.Recording.2025-10-25.at.12.11.53.AM.mov

Updated the media query in custom.css (Section 11) from
max-width: 1299px → max-width: 996px.
This synchronization ensures the hamburger menu only appears when Docusaurus’s mobile sidebar is actually active.
✅ Eliminates the non-functional zone between 1300px and 996px.

2. Responsive UI Update

Added a new rule (e.g., @media (max-width: 1110px)) to hide the “Sign in with GitHub” text, keeping only the icon visible.
This ensures the navbar remains clean and uncluttered on medium-sized screens (≈1000–1200px), where space is limited.
✅ Prevents text wrapping or layout shifts.

3. Button Consistency (UX Improvement)

Earlier

Verified that the GitHub sign-in button/icon is visible both in the main navbar (desktop) and inside the mobile sidebar (mobile view).
✅ Ensures consistent access to authentication options across all devices.

Type of Change

Bug fix (non-breaking change that fixes an issue)
UI/UX improvement (design, layout, or styling updates)

Changes Made

Screen.Recording.2025-10-25.at.12.10.06.AM.mov

Synchronized custom breakpoint with Docusaurus default (996px)
Added responsive CSS to toggle GitHub button text/icon
Ensured login button consistency between navbar and sidebar
Verified full responsiveness across major viewport ranges

Dependencies

No new dependencies added
No version or configuration changes required

Checklist

My code follows the style guidelines of this project
I have tested my changes across major browsers and devices
My changes do not generate new console warnings or errors
I ran npm run build successfully and verified responsive behavior
This PR corresponds to an issue already assigned to me

vercel · 2025-10-24T18:49:55Z

@kanishka-commits is attempting to deploy a commit to the recode Team on Vercel.

A member of the Team first needs to authorize it.

github-actions · 2025-10-24T18:50:04Z

Thank you for submitting your pull request! 🙌 We'll review it as soon as possible. The estimated time for response is 5–8 hrs.

In the meantime, please provide all necessary screenshots and make sure you run - npm build run , command and provide a screenshot, a video recording, or an image of the update you made below, which helps 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 PR 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 20 contributions are eligible for sponsorship 💰

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

📚Your perks for contribution to this community 👇🏻

Get free Consultation use code recode50 to get free: Mentorship for free.
Get the Ebook for free use code recode at checkout: Data Science cheatsheet for Beginners.
Check out this weekly Newsletter: Sanjay's Newsletter.

If there are any specific instructions or feedback regarding your PR, we'll provide them here. Thanks again for your contribution! 😊

github-actions · 2025-10-24T18:50:09Z

✅ Synchronized metadata from Issue #1017:

Labels: level 1, recode, hacktoberfest-accepted
Milestone: recode:launch 3.0

sheikhlimon

Good start though I don’t think this fully solves the problem as intended. It might be worth checking section 10. Try to find a sweet spot for both of them. I would suggest look a bit more into media query and how it should handle breakpoints in mobile and tablet as well as desktop

sheikhlimon · 2025-10-25T03:17:31Z

@kanishka-commits this is what i see

i can see the github icon on medium screen
instead of showing it here i guess you can add one inside the hamburger menu

CC @sanjay-kv @iitzIrFan

github-actions · 2025-10-25T09:59:25Z

✅ Synchronized metadata from Issue #1017:

Labels: level 1, recode, hacktoberfest-accepted
Milestone: recode:launch 3.0

github-actions · 2025-10-25T10:01:38Z

✅ Synchronized metadata from Issue #1017:

Labels: level 1, recode, hacktoberfest-accepted
Milestone: recode:launch 3.0

…site into ui/nav

github-actions · 2025-10-25T10:02:50Z

✅ Synchronized metadata from Issue #1017:

Labels: level 1, recode, hacktoberfest-accepted
Milestone: recode:launch 3.0

github-actions · 2025-10-25T10:10:53Z

✅ Synchronized metadata from Issue #1017:

Labels: level 1, recode, hacktoberfest-accepted
Milestone: recode:launch 3.0

kanishka-commits · 2025-10-25T10:25:48Z

@sheikhlimon
Yes I completely agree, this commit doesn’t fully resolve the navbar issue for smaller viewports. I’ll review all the required sections, look more closely into media queries and raise a separate issue to optimize it further.

About the GitHub, I've made the necessary changes:

Added "Sign in" text instead of simple icon as updated earlier
Decreased the gap for smaller viewports, to fit the text for consistent UI

Kindly review the commits and let me know.

Changes made

505621649-cdc4beb7-5fbf-4e89-a296-59482dfb11a3.mov

sheikhlimon

Thanks for your hard work..
I can see the Sign in button
but on my normal screen.. i can still see the same thing

kanishka-commits · 2025-10-25T10:29:22Z

@sheikhlimon
May I know, by the "same thing" you meant the inconsistent gaps in the dropdown for Docs?

sheikhlimon · 2025-10-25T10:36:11Z

@sheikhlimon May I know, by the "same thing" you meant the inconsistent gaps in the dropdown for Docs?

yes and this as well

Edit: I was able to achieve this when i tried to fix it but couldn't fix it after this point

kanishka-commits · 2025-10-25T10:45:12Z

@sheikhlimon
About the dropdown, if that is the case, the navbar dropdown issue will be addressed in a separate PR, as this one was specifically for the hamburger gap.

Regarding the “Sign in” text, the changes have already been implemented in the latest commit, please take a look to see the updated version.

sheikhlimon · 2025-10-25T10:48:05Z

this is the confusing part
so on live site i can see this on 95% zoom

after you changes its working for 95% zoom as well.. the issue is normally on 100% it should show what it shows on 95%
for your better understanding on 95% zoom the screen resolution is 1338p on 100% its 1268p

sheikhlimon · 2025-10-25T10:49:59Z

@sheikhlimon About the dropdown, if that is the case, the navbar dropdown issue will be addressed in a separate PR, as this one was specifically for the hamburger gap.

Regarding the “Sign in” text, the changes have already been implemented in the latest commit, please take a look to see the updated version.

i can see the Sign in on medium screen that part is done.. im talking about normal screen the more and sign in is overlapping each other

sheikhlimon · 2025-10-25T10:53:58Z

this is the confusing part so on live site i can see this on 95% zoom

after you changes its working for 95% zoom as well.. the issue is normally on 100% it should show what it shows on 95% for your better understanding on 95% zoom the screen resolution is 1338p on 100% its 1268p

@kanishka-commits I have attached the resolution here i see this on.. so check it out if you see the same

kanishka-commits · 2025-10-25T11:04:15Z

@sheikhlimon
It's indeed confusing, as this's how my home page looks like, on your provided resolution.

As I can see, on both my local as well as deployed web-app, the gap between the left (docs->more) and right nav-items(github->toggle) are significant but on your local device, it looks as if it's not present there, May I know why is this the case?

sheikhlimon · 2025-10-25T11:09:01Z

@sheikhlimon It's indeed confusing, as this's how my home page looks like, on your provided resolution.

As I can see, on both my local as well as deployed web-app, the gap between the left (docs->more) and right nav-items(github->toggle) are significant but on your local device, it looks as if it's not present there, May I know why is this the case?

check on 1268.. 1338 is good

kanishka-commits · 2025-10-25T11:14:33Z

@sheikhlimon Yes I completely agree, this commit doesn’t fully resolve the navbar issue for smaller viewports. I’ll review all the required sections, look more closely into media queries and raise a separate issue to optimize it further.

About the GitHub, I've made the necessary changes:

Added "Sign in" text instead of simple icon as updated earlier

Decreased the gap for smaller viewports, to fit the text for consistent UI

Kindly review the commits and let me know.

Changes made

505621649-cdc4beb7-5fbf-4e89-a296-59482dfb11a3.mov

@sheikhlimon
In this .mov file, I’ve demonstrated the viewports ranging from 1299px to 970px. Kindly take a look starting from 1268px, I hope this helps

sheikhlimon · 2025-10-25T11:24:54Z

now w

@kanishka-commits I just checked on multiple browsers, and the behavior is different on every single one of them... playing with media query in docusaurus is like fighting with it...lol.. the default docusaurus makes it look snappier i guess everything looks fine.. with your changes.. this seems like an ok fix... but not satisfactory to me..
@sanjay-kv @iitzIrFan might differ

But nonetheless, I really appreciate the work you put in.. Thank you..

kanishka-commits · 2025-10-25T15:18:00Z

@sheikhlimon
Thanks a lot for checking across browsers!
Agreed, Docusaurus media queries might be a bit tricky
Since it worked well across all major browsers I’ve tested so far, I decided to go ahead with this fix for now.
Totally get your point though: open to refining it further if we find a cleaner solution.
Appreciate the feedback!

vercel · 2025-10-26T02:02:19Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
recode-website	Ready	Preview	Comment	Oct 26, 2025 2:03am

kanishka-commits added 2 commits October 24, 2025 23:49

Update Viewport

9301f0d

Update Github Visibility

1898a10

github-actions bot added hacktoberfest-accepted recode this is label for leaderboard level 1 10 points labels Oct 24, 2025

github-actions bot added this to the recode:launch 3.0 milestone Oct 24, 2025

sheikhlimon reviewed Oct 25, 2025

View reviewed changes

Update Github text

7940511

Update Gap in Nav__Items

f31b4e5

Merge branch 'main' of https://github.com/kanishka-commits/recode-web…

aeaa410

…site into ui/nav

Update Gap + Navbar Breakpoint

c2d41c1

sheikhlimon reviewed Oct 25, 2025

View reviewed changes

sanjay-kv approved these changes Oct 26, 2025

View reviewed changes

sanjay-kv assigned kanishka-commits Oct 26, 2025

sanjay-kv added this to @recode-web Oct 26, 2025

sanjay-kv moved this to Done in @recode-web Oct 26, 2025

sanjay-kv merged commit fb7b92e into recodehive:main Oct 26, 2025
5 of 6 checks passed

vercel bot deployed to Preview October 26, 2025 02:03 View deployment

[FIX]: #1017 Hamburger Menu Appears but Doesn't Display Content Between 1300px and 996px Screen Width #1060

[FIX]: #1017 Hamburger Menu Appears but Doesn't Display Content Between 1300px and 996px Screen Width #1060

Uh oh!

Conversation

kanishka-commits commented Oct 24, 2025

Description

Problem Summary

Why This Happened

Solution Summary

1. Aligned Breakpoint (Core Fix)

2. Responsive UI Update

3. Button Consistency (UX Improvement)

Type of Change

Changes Made

Dependencies

Checklist

Uh oh!

vercel bot commented Oct 24, 2025

Uh oh!

github-actions bot commented Oct 24, 2025

Uh oh!

github-actions bot commented Oct 24, 2025

Uh oh!

sheikhlimon left a comment

Choose a reason for hiding this comment

Uh oh!

sheikhlimon commented Oct 25, 2025

Uh oh!

github-actions bot commented Oct 25, 2025

Uh oh!

github-actions bot commented Oct 25, 2025

Uh oh!

github-actions bot commented Oct 25, 2025

Uh oh!

github-actions bot commented Oct 25, 2025

Uh oh!

kanishka-commits commented Oct 25, 2025

Uh oh!

sheikhlimon left a comment

Choose a reason for hiding this comment

Uh oh!

kanishka-commits commented Oct 25, 2025

Uh oh!

sheikhlimon commented Oct 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

kanishka-commits commented Oct 25, 2025

Uh oh!

sheikhlimon commented Oct 25, 2025

Uh oh!

sheikhlimon commented Oct 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

sheikhlimon commented Oct 25, 2025

Uh oh!

kanishka-commits commented Oct 25, 2025

Uh oh!

sheikhlimon commented Oct 25, 2025

Uh oh!

kanishka-commits commented Oct 25, 2025

Uh oh!

sheikhlimon commented Oct 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

kanishka-commits commented Oct 25, 2025

Uh oh!

vercel bot commented Oct 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

sheikhlimon commented Oct 25, 2025 •

edited

Loading

sheikhlimon commented Oct 25, 2025 •

edited

Loading

sheikhlimon commented Oct 25, 2025 •

edited

Loading

vercel bot commented Oct 26, 2025 •

edited

Loading