fixed-mobile-hamburger-to-header #2066 #2107
Open
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
screenshot
video
Screencast.From.2025-11-11.12-26-50.mp4
Changes :
Removed the floating hamburger button from sidebar.html.
Added a new hamburger button to the right side of the header.html.
Updated the hamburger button color to orange for better visibility.
Added a condition so the hamburger button does not appear on the homepage, only on inner pages.
Modified the .sidebar-btn styling in sidebar.scss for better alignment and responsiveness.
Created a new JS file mobile-nav.js to handle hamburger toggle events.
Linked the mobile-nav.js script in baseof.html to enable functionality site-wide.
Context
The previous mobile navigation design had the hamburger icon floating on the left, which obstructed content and affected the browsing experience on smaller screens.
This update moves the hamburger into the header, improving accessibility, visibility, and usability. The conditional logic ensures it only appears where needed, keeping the homepage layout clean.