Streaming live at 10am (PST)

My drop down menu 'snaps' up on second click


#1

Hi All,

I have two divs, first (Product Navigation) and secondly (Drop Down Wrap). When you click on Product Navigation it reveals the Drop Down Wrap. The Drop Down Wrap has a initial appearance of 0 Height and Display None and when the Product Navigation is clicked the Drop Down Wrap height=auto and display=block.

On the reveal, the drop down appears fine and smooth. On second click it closes most of the way smoothly then 'snaps' the rest of the way. Previously, I have changed the Overflow to hidden and has fixed this but it doesn't seem to work for this.

Please see the link below.
https://preview.webflow.com/preview/sunline?preview=f3d64f9de9760c8056d90a6b713ea835

I hope this makes sense!

Many thanks
Matt


#2

Add overflow:hidden on the wrap div


#3

Thanks @vincent, im sure i tried that before and it didn't work. Classic case of needing a fresh pair of eyes on the case!


#4

I'm on it!

But really it did work for me... Let me look further.


#5

Yes ok.

I knew it but you got me confused because you said the Drop Down Wrap was targeted and I didn't verify.

It's actually drop down ROW that is targeted, and you can't put margins or padding to an element that you want to zero the height. because margins and paddings donc't count in the height. So the element shrnks to margin+padding then disappear, causing what we see.

Remove all margins and paddings to the targeted element. nest the content in a div that you give paddings to.


#6

Ah yes, that makes sense. I'm sorry, I am not particularity great at explaining myself!

Thanks again.


#7

No no don't be that's allright : )

Every designer run into that particular issue at some point with Webflow. Even when you're familiar with the box model it's easy to forget that height doesn't take margins and padding into account.

Also, a precision: when you can, don't target height:auto. because.. this is simply not supposed to work, at all. It can make the smooth anim not work, and at times it can not work completely. Try to target a given height. The problem is you cant change that value between breakpoints so you gotta take that into account. I admit I still target height:auto even if I shoudl'nt.


#8

Interesting point. I find height is such a sticky point. 100% height never works, I tend to steer clear with px heights, so i started using VW/VH. These aren't 100% ideal either. What do you tend to use?


#9

Yep, it can't, this is a case where HTML doesn't know what to do. 100% means "match the height with parents' height" and in this case it's either unknown or not applicable. That's why in the real world we need JS so much, because HTML falls short of getting dimensions most of the time.

VW and VH are always known, easy to figure out by HTML.

What works :smiley:


#10

Yes, it seems like it is a definite grey area in HTML/ CSS world!


#11

This topic was automatically closed after 60 days. New replies are no longer allowed.