Burger Menu Nav Links

Design help General
1

Hi All,

I’m having real issues getting the mobile navigation working properly on my site. I’ve tried building a custom burger menu with an animation that made the links appear as an overlay but had to scrap it because the animation stopped working on some pages.

I’ve resorted to using the built in nav bar burger menu and I’m trying to get a similar effect by styling the Nav Bar Drop Down element so it overlays the whole screen when the user clicks the icon.

Everything is working fine but, ideally I want the Nav Links to be centred horizontally and vertically on all mobile screens but I can’t work out how to do this? All my links currently sit at the top of the Nav Bar Drop Down element and on the tablet view they sit over to the left hand side?

I realised all of the above is down to user error :wink: but any help would be greatly appreciated!

Thanks in advance.
Dan

Here is my site Read-Only: https://preview.webflow.com/preview/wb-website-2019?utm_source=wb-website-2019&preview=58ffba1c8f6200794c15b513fd9a8d7f

1 Like
2

Yeah that is strange. The default nav menu wrap doesn’t seem to flex properly. Leave it as display block. Add another div within it and turn that to flex and nesti the links. Seems to work. Best to master building a custom menu but whatever works.

3

Perfect… that worked! Thanks.