[Bug] Navbar UI broken in mobile devices.

[abhishekrawat22]

Version

2

Reproduction link

https://demos.creative-tim.com/material-dashboard/pages/dashboard.html?ref=readme-md2

Operating System

Windows

Device

Acer Nitro 5

Browser & Version

Chrome(114), Firefox(114), Edge(114)

Steps to reproduce

1. Click the mentioned link.
2. Inspect the page in the responsive mode with a viewport width below 670px.
3. Check the header navbar at the top.

What is expected?

All the aligned elements should be adjusted so that the navbar row doesn't look congested in the smaller devices.

What is actually happening?

All the navbar elements are so close that the space in the row has run out and now the text of the online builder button and the sign in text is broken.

---

Solution

1. Remove the margin-left and right from the nav tag for the smaller devices.
2. Change the media query for the margin right applied to the navbar-collapse div just after the breadcrumb.
3. Remove the sign in text. The icon will do enough for mobile users.
4. Make the type here input full width by using flex:1, and apply flex-wrap: wrap to its flex parent. This will shift the content after the input to the next row. Creating space for writing in the input and adjusting the rest of the row content.
5. Shift the hamburger icon next to the right of the breadcrumbs for a better user experience.
6. Remove extra spacing(padding, margin) created around list items of navbar-nav ul. Instead, use justify-content: space-between.
7. Adjust the font size and padding of the online builder button.

Additional comments

[groovemen]

Hello @abhishekrawat22,

Thank you for using our products and for letting us know about this issue. We will fix this issue in the next product update - also, thank you for your solution.

All the best,
Stefan

[abhishekrawat22]

Happy to help!