Mobile nav behaving oddly

I can’t seem to get the menu items in my mobile nav to sit centre aligned. Sometimes they look left alined but in the centre of the screen (tablet), other times they look centre-aligned but shifted to the right (mobile). On hover, some alignment issues also happen.

It works perfect on desktop.

I’ve got fixed widths on the nav link components because that was the only way I could get the hover state to work the way I wanted (with the orange underline the correct length), but I think this may be causing part of the problem?

Can someone help?

Here is my site Read-Only: Webflow - Marisa Jensen

Hi Marisa !

You have to set width:auto on your “NavItem” class

Don’t fix the width and the height on your “NavItem” class ! Use only flexbox to center your elements.

I hope this helps!

Have a nice day.

1 Like