Description
The navigation bar overflows horizontally on smaller screen widths and zoomed browser views. Some navigation items and action buttons extend beyond the visible viewport, making them partially inaccessible. Additionally, there is no horizontal scrolling mechanism or responsive handling to allow users to access the hidden content. This negatively impacts usability and responsiveness across different screen sizes.
Steps to Reproduce
Go to the homepage.
Resize the browser window to a smaller width or increase the browser zoom level.
Observe the navigation bar at the top of the page.
Notice that some navbar elements overflow beyond the viewport.
Attempt to access the hidden elements and observe that no horizontal scrolling option is available.
Expected Behavior
The navigation bar should remain fully accessible across all screen sizes and zoom levels. Overflowing content should either:
Wrap appropriately,
Collapse into a responsive menu,
Or provide horizontal scrolling when necessary.
Users should be able to access all navigation items without content being cut off.
Screenshots
The attached screenshot demonstrates the navbar overflowing beyond the viewport, with navigation items and action buttons extending outside the visible area and no horizontal scroll option available.
Environment
OS: Windows 11
Browser: Google Chrome
Version: Latest Stable Release
Additional Notes
Investigate the navbar container width and flexbox/grid behavior.
Verify responsiveness across common breakpoints (mobile, tablet, desktop).
Ensure all navigation items remain accessible without causing horizontal overflow.
Test with different browser zoom levels (100%, 125%, 150%, etc.).
Consider implementing responsive menu behavior for smaller viewports.
Description
The navigation bar overflows horizontally on smaller screen widths and zoomed browser views. Some navigation items and action buttons extend beyond the visible viewport, making them partially inaccessible. Additionally, there is no horizontal scrolling mechanism or responsive handling to allow users to access the hidden content. This negatively impacts usability and responsiveness across different screen sizes.
Steps to Reproduce
Go to the homepage.
Resize the browser window to a smaller width or increase the browser zoom level.
Observe the navigation bar at the top of the page.
Notice that some navbar elements overflow beyond the viewport.
Attempt to access the hidden elements and observe that no horizontal scrolling option is available.
Expected Behavior
The navigation bar should remain fully accessible across all screen sizes and zoom levels. Overflowing content should either:
Wrap appropriately,
Collapse into a responsive menu,
Or provide horizontal scrolling when necessary.
Users should be able to access all navigation items without content being cut off.
Screenshots
The attached screenshot demonstrates the navbar overflowing beyond the viewport, with navigation items and action buttons extending outside the visible area and no horizontal scroll option available.
Environment
OS: Windows 11
Browser: Google Chrome
Version: Latest Stable Release
Additional Notes
Investigate the navbar container width and flexbox/grid behavior.
Verify responsiveness across common breakpoints (mobile, tablet, desktop).
Ensure all navigation items remain accessible without causing horizontal overflow.
Test with different browser zoom levels (100%, 125%, 150%, etc.).
Consider implementing responsive menu behavior for smaller viewports.