Full screen navbar menu dropdown takeover transitions

Design help Animations & Interactions
1

Hello!

On my site I currently have a hamburger menu set up for my navigation. After clicking there is a full screen takeover. In the menu, not all of the links are visible; you have to scroll to get to some of them. As a result when the dropdown transition occurs, it looks awkward because the dropdown begins with the bottom-most visible section of the menu, not with the actual bottom.

Is there a way to adjust this transition? So far I haven’t been able to move beyond the default options; drop down, over left, and over right.

I’ve played a little with just creating an interaction despite those settings in the element settings panel, but so far I’ve had no luck.

The live site is here: http://tara-odorizzis-first-project.webflow.io/

Thanks for your suggestions!

Here is my public share link: https://preview.webflow.com/preview/tara-odorizzis-first-project?preview=65349bf4ce4f9d988360c82aca1342b8

2

Hello @to1185

My suggestion is to not use the built-in navbar component. It has limited options and there are settings that can’t be adjusted in the designer.

With a custom interaction you will have much greater control and creative freedom, and I can see from your site that you are good with interactions already. Try and recreate the navbar using div elements and reusing the existing class names. Then create your own custom interaction to bring the menu in.

Hope that helps. Happy designing!

3

Thanks @matthewpmunger! I think that’s a good call. There seem to be a lot more options this way, you’re right. I’ll keep playing with it and I’m sure I’ll land on something that works. Thanks again!

1 Like