Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

[BUG]: Header navigation links disappear on small screens without a responsive menu

Open
#178 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
3/5
Estimated time
1-2 days
Newbie friendliness
68/100
Issue type
Bug
Clarity
Mostly clear
Activity status
Active
Tech stack
javascript
Domain
frontend

Research direction

Start at the global application header/navigation entry point and reproduce the issue at approximately 550px in Chrome. Verify that the responsive menu provides access to Overview, Repositories, Contributors, Network, Analytics, and Governance, and confirm these links remain accessible at narrow widths.

Written by the indexing model from the issue text.

Description

bug enhancement
Bug Description

The application header navigation is not responsive on smaller screen widths.

When the viewport width is reduced to around 550px or below, the header navigation links such as Overview, Repositories, Contributors, Network, Analytics, and Governance are hidden. However, no menu button, hamburger icon, or other navigation option is provided to access these links.

This makes the main navigation inaccessible on smaller screens.

Current Behaviour

At approximately 550px viewport width:

  • The header navigation links disappear.
  • No responsive menu or navigation toggle is displayed.
  • Users cannot access the hidden navigation links from the header.
Steps to Reproduce
  • Open the OrgExplorer application.
  • Navigate to any page where the main header is visible.
  • Resize the browser window to approximately 550px width or smaller.
  • Observe the header navigation.
  • The navigation links disappear.
  • Observe that there is no menu button or other option to access the hidden navigation links.
Logs and Screenshots

No console errors or application logs are produced.

Current Behaviour

At a wider viewport, the navigation links are visible in the header.

At approximately 550px width, the navigation links are hidden while no alternative navigation control is available.

The attached screenshots demonstrate the header at different viewport widths and the disappearance of the navigation links on the smaller viewport.

Expected Behaviour

The header should provide a responsive navigation experience on smaller screens.

When the viewport becomes too narrow to display the navigation links:

  • The navigation links should be hidden from the desktop layout.
  • A menu/hamburger button should be displayed in the header.
  • Clicking the menu button should open a responsive navigation menu.
  • The menu should provide access to the same navigation links:
  • Overview
  • Repositories
  • Contributors
  • Network
  • Analytics
  • Governance
  • The menu should be accessible without requiring the user to increase the browser width.
Environment Details

Environment Details

  • OS: Windows 11
  • Browser: Google Chrome
  • Application: OrgExplorer
  • Viewport: Approximately 550px or smaller
  • Area: Global application header/navigation
  • No console errors observed
Impact

Medium - Feature works but has issues

Screenshort

Image Image
Code of Conduct
  • I have joined the Discord server and will post updates there
  • I have searched existing issues to avoid duplicates
Dominant language
JavaScript
Stars
35
Forks
98
Avg merge
2d 17h
Merged PRs (30d)
10

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from AOSSIE-Org/OrgExplorer

All issues in AOSSIE-Org/OrgExplorer

Similar issues

More JavaScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.