'Drop-down Opens - Fade' not working properly

Hello Webflow experts, can you see what the problem is here ?

On this Webflow build https://hlb-mann-judd.webflow.io/ I want the drop-down navigation elements to fade in on clicking the toggle. I have selected the Dropdown nav root element and selected the ‘Dropdown opens’ option in Interactions (see below), and then the fade in and fade out options. It kind of works, but it has turned off the initial display attribute of the dropdown top link (between Home and Our Services). It’s still clickable and fades in after being clicked but doesn’t fade out after clicking, just snaps off = disappears completely. So it doesn’t really work.

I did a simpler test to see if there was something in my page causing a conflict, but the result is pretty much the same, a little better, doesn’t snap off on second click. The dropdown root item is not visible, though still clickable (sits between Link and Contact) http://brand-counsel-testing-site.webflow.io/drop-down-navigation-fade

Does this work? Am I doing something wrong?

Any help appreciated.
Cheers
Grant


Here is my site Read-Only: https://preview.webflow.com/preview/hlb-mann-judd?utm_source=hlb-mann-judd&preview=192695304836fcf928403d364cf7d5d4
(how to share your site Read-Only link)

1 Like

Grant, are you testing in Chrome? I’m having the same trouble. I think there’s a larger problem at play - just looking at webflow’s own page in Chrome, then Safari, it seems the interactions are working on Safari but not Chrome. I found an old post about this -

https://discourse.webflow.com/t/interactions-not-loading-in-chrome/64229

and it seemed to fix itself. I’d like to get to the bottom of it - I’ve wasted about an hour trying to sort this out on one of my sites before I realised the issue was across the board.

I’m on the latest Chrome and OS.

Here’s a screenshot of the js errors through Chrome:

02%20pm

Hi there. Yes, all testing done in Chrome. It didn’t occur to me that it could be a browser issue, figured as it’s one of Webflow’s listed tools that it was going to work fine. However, testing on Safari in Browserstack, the problem is still there = doesn’t work properly. (All other interactions are fine though).

Any ideas Webflow staff folk?

Grant

Looks like our issues are different. Mine has magically resolved. Good luck!

Hi @grantsenior

I made a quick video showing how I was able to build this out: https://cl.ly/105781f5f60b

Hope this helps!

2 Likes

Hi Brando,

Thanks for that, your demo looks good and clear, I’ll give it a try.
Unfortunately the fade in/out idea was requested once everything else had been built and designed to work a different way. Fingers crossed I can get things working without having to re-do too much.
Cheers!

Thanks again Brando, I got it all working. Your assistance with this was most helpful!

Grant

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