Streaming live at 10am (PST)

How to put a drop shadow on a nav bar when page is scrolled


#1

I’d like to put a drop shadow on the nav bar only when the page is scrolled. When the page is scrolled back to the top, I’d like the drop shadow to disappear. I’d love to know the best way to accomplish that throughout all the pages.

Thanks!


Here is my public share link: *https://preview.webflow.com/preview/totango-wf?preview=1f0a79c25b124ffc50ef7c45f02c9511


#2

Im checking that for you now… First thing I noticed tho was this though (quick fix):

CloudApp


#3

Looks like you already fixed that the nav lol.


#4

Yes! I figured it out last night and forgot to post that I resolved it.
Many thanks for checking it out and apologies. Also, thanks for the catch on the overflow and the quick fix. Really appreciate that!


#5

I should mention the solution here:

I put a div with a drop shadow behind the navigation and gave it a class. Then put a scrolling animation trigger on it that set the opacity at 0% and then 100% when scrolled.


#6

Yeah I saw that… I was like half way of writing you a full tutorial on how to do the exact same thing and then for some reason I decided to go back and look and I was like… Wait a minute. Looks like he already did that. And as I was explaining it I started noticing it and then deleted everything haha.