Navbar Items not responsive in Mobile View

[M-DEV-1]

Description

When I access the musicblocks website on my mobile device (android), the navbar items overflow and shift to the next line. This may sometimes lead to them overlapping with other content such as the menu/blocks. It can also be difficult to operate the accessibility menu when loaded.

This affects our ability to navigate through the musicblocks website using an Android device.

Device used to replicate issues: Pixel 6a

Expected Behavior

All Navbar Items should remain in one line, and not overflow. They should adjust size according as per mobile width.

They should NOT overflow onto multiple lines.

Screenshots

Pixel 6a (My Android Device)

Browser Inspect (Size: Pixel 7)

Browser Inspect (Size: iPhone 14 Pro Max)

How to Reproduce

1. Open musicblocks on a mobile device.
2. Complete the tour and navigate to the main page (sandbox environment)

Here you can observe that the navbar items are unresponsive and overlap onto the blocks on certain mobile views.

Environment:

• Operating System: Android 14 and Android 15
• Browser (if applicable): Brave, Chrome

Checklist

• I have read and followed the project's code of conduct.
• I have searched for similar issues before creating this one.
• I have provided all the necessary information to understand and reproduce the issue.
• I am willing to contribute to the resolution of this issue.

---

Thank you for contributing to our project! We appreciate your help in improving it.

📚 See contributing instructions.

🙋🏾🙋🏼 Questions: Community Matrix Server.

[vishalgupta-02]

@M-DEV-1 hey bro, have you solved the issue and will you help me in explaining the issue??

[M-DEV-1]

Hi @vishalgupta-02, I have solved the issue in PR #4197.

As you can see in the screenshots, navbar items are not responsive in mobile views. So I have solved them by making them responsive.