Nav bar hamburger menu not showing properly when viewed on mobile

Hi there, I am having an issue with the navigation clean menu bar when it goes to mobile size. It all works fine and when I preview it on my computer and make it the size of a mobile screen it works great however, when I view on a mobile when I click on the hamburger icon one of the menu items isn’t showing properly it seems to only showing five menu items as opposed to six, the top menu item seems to be stuck at the top and can’t be viewed. Any help appreciated.

Cannot diagnose this without seeing your live website or code.

Hi there, the link is thanks for the help. Basically when the hamburger menu drops down the nav shifts to the top and I can’t scroll up again

I don’t see any see any issues with the scrolling on my desktop or android phone, but the way you’ve designed your navbar seems rather messed up.

For one, you’ve got the brand image placed as a background image, set to “cover” with a whole string of                             after it, which makes no sense to me? (also, the bottom of the logo is cut off.)

Second, you’re using an inline class of height:100; which is not the right way to set the height of the Navbar. It seems like you changed the padding on the .container class to 40px, which also makes no sense.

I’m not sure what’s going on with all the flexbox classes you’ve added, either.

Lot’s a stuff here that needs fixing, so I’d start by disabling whatever custom classes you’ve created to override the navigation clean layout until you find which one is causing your problem. Either that or start fresh with a new Navbar and build it correctly.

AND NO INLINE CSS! It makes diagnosing problems a nightmare.

Thanks so much for your help, I started from scratch again and works fine now, the only issue is the menu doesn’t pop back up in mobile and covers the site, is there a way to pop this back to it’s original state once clicked?

Sorted, just a bit of javascript