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: