Skip to content

[Bug] : Navbar overflows on smaller screen widths due to missing responsive layout #443

Description

@trushi-jasani

Description

Bug Description

The navigation bar does not adapt properly on smaller screen widths. All navigation links, action buttons, and the CTA remain on a single row, causing horizontal overflow and requiring users to scroll horizontally.

Steps to Reproduce

Open the website.
Resize the browser window to around 1200px or smaller.
Observe the navigation bar.

Expected Behavior

The navbar should remain responsive.
Navigation items should collapse into a mobile/tablet menu (hamburger) or wrap appropriately.
No horizontal scrolling should occur.

Actual Behavior

Navigation links remain on a single line.
Buttons (Dashboard, Web app, Get ARVIO) overflow horizontally.
A horizontal scrollbar appears.

Screenshot

Image Image

Possible Solution

Add responsive breakpoints for the navbar.
Hide navigation links behind a hamburger menu on smaller screens.
Allow action buttons to collapse or move into the mobile menu.
Ensure overflow-x is prevented.

If this is for an open-source repository, you can also add:

Labels

bug
UI
responsive
good first issue (if appropriate)

This issue is clear, reproducible, and gives maintainers enough information to understand and fix the problem.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions