Streaming live at 10am (PST)

Dropdown menu on scroll fade-in doesn't dropdown (not clickable/reactive)


#1

Hey,

I followed the tutorial video on how to make an element fade-in on scroll after the hero section. The element being specifically a dropdown menu but after following the directions in the video, the dropdown menu does the interaction of fading in only after the hero section but it's not clickable. It doesn't dropdown, nothing happens. Did I do something wrong? Any and all help would be appreciated.

I tried changing the element from the dropdown itself to the container holding the dropdown menu - made no difference.

Also can someone explain to me why choosing "Block" display in the interaction is required? I tried having the interaction without it and the menu didn't show up at all.

Designer mode of my site:
https://preview.webflow.com/preview/not-another-universe?preview=bea02a7369d8ef0feabff536b752f073

Tutorial video:
http://interactions.webflow.com/fade-in-navbar-video

Thanks for any and all help.

Edit: I was thinking ... this new interaction wouldn't negate the default dropdown interaction of the dropdown menu, would it?


#2

Hi @Aperion, I originally could not find the Quotes Menu Bar, but I found it with your info smile Anyway, I had made a video to show how to make the scroll interaction work. Maybe you do not need this, but maybe it will help someone else smile

Cheers,
Dave


#3

Hello,

I can't believe I got a personalized response; once I saw the video thumbnail in your post I thought it might be a screencast but lo' and behold it's a video and there are voice directions too! You're awesome!

I've been considering whether I want to make my NavBar scroll fade-in - now that I that I received a step-by-step instruction video, I just might. That said, while I thank you for your video directions; and, your advice about designing my site more efficiently (extra section for better aesthetic-efficient design and SEO optimization, etc.).

I fear I was referring to something else in my post. I see now that I wasn't being specific enough in my post - which is unusual for my verbose self - I also see how one of the interactions being labeled "Display Nav Bar" could have misled you, that's a misnomer on my part - sorry!

I currently have two pages on my site: Home (Main) Page, and a Quotes Page. The navbar has a symbol so that it's accessible across my whole site. I have a separate "menu" (dropdown list) specifically for and on my Quotes Page. The Quotes Page as you might have guessed from my character/personality/mindset by now is long, there are over a dozen sections. The dropdown menu I have on the Quotes Page, referred to as the "Quotes Menu Dropdown Bar" (the element you saw in the Display Nav interaction) has clickable links that lead the user to their respective sections on the Quotes Page.

The dropdown menu itself works fine but when I create the interaction to have it scroll fade-in after the hero section (all of this on and just on the Quotes Page) then the separate dropdown menu (not the universal navbar) is no longer clickable/reactive.

Also at the moment accessing the dropdown menu is covered by the navbar so you may need to move it down to select the element or else go through the list view on the right side of the designer (that is if you decide to take another peek).

Sorry for the trouble and this wall of text. Thank you very much for the video, it's very much appreciated! Hopefully others will find it helpful as well.

Edit:

Here's the site preview link again just encase.

https://preview.webflow.com/preview/not-another-universe?preview=bea02a7369d8ef0feabff536b752f073


#4

Hi @Aperion, thanks for the additional info smile On the quotes page, the Navmenu has a z-index of 1000, so can you give your quotes menu bar a z-index of 1500, save and publish changes and then check again ? Cheers, Dave

a


#5

If it weren't for that voice in the instructional video I'd think you were an A.I...

z-index is now 1500. I don't see a notable difference. I guess z-index has something to do with depth?

Edit: FYI, Quotes Menu Bar (vertical container) is in the Quotes Hero Section.

Preview:
https://preview.webflow.com/preview/not-another-universe?preview=bea02a7369d8ef0feabff536b752f073


#6

Hi @Aperion, can you please check this again? I just checked and the Quotes Menu Bar still does not have the z-index of 1500 and when I added this, it started to work. If possible, can you check this and let me know? Thanks smile Dave


#7

Oh I just realized I changed the z-index of the navbar not the menu bar. Sorry! Let me fix this.

Edit: Still nothing. I don't know why, but around the time of changing the z-index, the dropdown menu no longer appears on the displayed page itself (the element is in the designer and list).

I checked my interactions and they're exactly like the one's in the scroll fade-in tutorial video and those "worked" earlier in the sense that the dropdown menu appeared after the hero section but it wasn't clickable (original problem).


#8

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