Mobile Navbar Design Issues

Hi all!

So I’m having issues with my mobile navbar. I’ll breakout the issue below between “What’s Currently Happening” and “What I’d Like to Have Happen” and will add screenshots to help better explain the issue and desired end result. I’ll also add a link to the project, as well.

What’s Currently Happening:

When you click on one of the mobile navbar links (in mobile view, of course), the link that is clicked is (1) underlined and (2) moves to the middle/right side of the viewport while the rest of the navbar links remain on the left side of the viewport.

Here’s a screenshot of what’s happening:

What I’d Like to Have Happen:

I’d like to make it so the links remain on the left side of the mobile navbar when clicked instead of getting shifted into the middle/right side. For some unknown reason, this issue is resolved when you close the navbar and reopen it. But how can I get this right without having to make users go through this extra annoying step? Also, I noticed when it’s reopened and everything’s on the left, the active page is underlined all the way across the viewport, but I’d prefer the underline to only span the length of the word itself as opposed to the page width.

Any help would be greatly appreciated as I’m completely stuck here! Thanks!


Here is my site Read-Only:
https://preview.webflow.com/preview/rg-johnson-company-inc?utm_medium=preview_link&utm_source=designer&utm_content=rg-johnson-company-inc&preview=6c34483e1dedb54f66248ccbd251fea9&workflow=preview

Hey @lecksus , on my first menu button open, I am seeing the desired output. Have you fixed this already then?

Hey thanks for replying @imtiazraqib . No, I have not resolved the issue yet. I should clarify that the menu looks fine at first, but it gets messed up when you press any of the links.

So here’s my UX flow from first logging onto the website through the issue itself:

First, I go to the website on my mobile phone:

Next, I click the menu button and open up the menu:

Then, I click on any of the navbar links (in this case I chose “Projects”). The “Projects” page shows up, but the word “Projects” is moved to the right and out-of-line with the other navbar link elements.

So you’re not experiencing this on your end?

I’m having the exact same issue. Did you ever get it resolved? THanks!