Streaming live at 10am (PST)

Interaction issue (size on hover)

I have a simple underline on hover effect on the main navigation at the top. There is a div that contains the nav link and a second div for the line. I set up the container div as the interaction trigger, and the line to change its width to 100%. So far, so good.

But when you hover out the line seems to grow over its container div – like 300% bigger, let’s say, and then shrinks back to its initial state of 0%, instead of just shrinking back to 0%. There is this short third state of the interaction that I can’t control, and shouldn’t be there.

Should I just be animating the border instead? Thanks for any pointers!

Note: the navigation is shown only with an interaction on the home page so it’s easier to work on it in the Information page.

Here is my public share link: LINK
(how to access public share link)

Set ‘Overflow’ to hidden on the ‘Nav_Button’ and then everything works fine.

thanks very much for this!