As one of the key elements on the website, the Navbar allows users to access categories, settings, and other content on the Glimesh platform. It’s current implementation works, however, some changes I’m proposing would benefit the user experience* for mobile and tablet users (as well as desktop users).
Current Glimesh Navbar.
The first phase of changes involves a visual update to the navbar (shorter height, background color, shadow), as well as fixing the navbar to the top of the page when a user scrolls. The images below are real code: reduces the height/padding on nav-item elements to shorten height, adds “shadow-sm” to create depth on page, “sticky-top” to fix the navbar to top of page on scroll, and one custom class for background effects.
Proposed Phase 1 changes.
Fixed navbar, on stream page.
Example of background blur effect on navbar
The second phase involves changes to the layout of nav-items depending on breakpoints. These changes may require custom CSS to implement, or more usage of Bootstrap utility classes. Below are design mockups of phase two (Note: the Desktop breakpoint is nearly identical to phase 1 at this moment.)
Notable changes here include: “shortened” Glimesh branding for tablet/mobile navbar, promoting placement of Followed Streams “Following” to top of navbar on tablet/mobile, and breakpoint specific layouts for expanded “collapsed” nav-items.
The fixed navbar has been part of an upcoming “sticky chat” feature, but it was suggested that it could be it’s own standalone improvement to the website. As always, glad to hear feedback on proposal, or suggestions to improve UX/UI.