Change mobile navigation drop down transition

By default, the mobile navigation menu animates with a slide down effect. Is there a way to turn this off or change the type of transition? I’d prefer an elegant opacity transition. Seeing the navigation I’ve styled may help make it make more sense. My public link, in case it’s needed is https://webflow.com/design/apostrophe?preview=6caa8437a5402bd9461016efac380d21

I haven’t tried it but I would set the transition of the slide down menu to “0” then transition the opacity from 0 to 100 in say 500ms. That would result in a non moving fade in full screen menu.

Cheers,
Martin

Thanks for the suggestion, Martin. I’m unable to get it to play nicely with those settings. Setting the transition time to 0 in the navbar settings seems to disable all transitions. I do get a weird occasional fade in on open once in awhile though.

Hey @craigteel, I see what you mean. Currently there is not a way to do this with our Navbar component.

Since we offer IX triggers for our Tabs + Slider components, we should definitely add one for our Navbar as well. That would open up a bunch of animation possibilities. Let us see what we can do :wink:

Thanks for speaking up!
-Dan

4 Likes

Hi @danro

I was playing around with the Navbar widget in relation to @craigteel’s question. Why does the default dropdown menu have an absolute position with a top value of 1092?

See screenshot…

Cheers,
Martin

@danro

What setting would you advise for having the Nav Menu full screen but not overlapping the Nav Bar?

I tried fixed absolute for both and gave Nav Menu a top offset of 60px. But it keeps displaying full screen overlapping Nav Bar, despite the top offset of 60 px and lower z-index.

Here’s the public link
https://webflow.com/design/someurl?preview=60e0235de74da46a95f28b195ee9b31c

Cheers,
Martin

@MartinB Try increasing the z-index of the nav “container” element, and it should appear on top.

As for the bar itself, this is not possible because of the div structure, but you could always drag another div into the navbar (alongside the container element) and increase its z-index as well.

Yeah, @MartinB, if you take a look at what I had done, I increased the z-index of the logo and hamburger icon for them to be visible.