Streaming live at 10am (PST)

Fade in nav tutorial not working for me - please help


#1

hello,
I have 9what I think) followed the tutorial to a tee for a fade in nav.
It's not working for me at all.

Can someone take a look and see where I am going wrong?
https://webflow.com/design/in-my-lifetime?preview=e189d5ad8972b2565cd04cfa092f228d

The page is a work in progress... but I need to get this nav before I tighten up the type and images.

Thanks!


#2

Hello @fnd ,

Everything you have done its ok. Just go to the nav-scroll make it position: fixed and set width to 100%.

Then connect your div section-intro with interactions Display Nav

i test it and it works great!

Hope this help.

Best,
Deni


#3

@Deni_1990 thanks so much for getting back to me so quickly. You are the man... that fixed it perfect.
Now to mess around with how it looks. Thanks again!


#4

sorry @Deni_1990! Another question.. how do I keep the menu on the most top layer so that the content does not go on top of the nav? Thanks again!


#5

hello @fnd,

you need to give a paddong-top to the body, if u have 90px the height of nav then give the padding-top: 90px, just play around.

Edit: i see your web and i think a padding-top: 110px to body looks perfect.

Also i see if u do that have a spacing problem because you use one nav, for me try to add another nav so you can keep it with 2 navigation, the navigation with scroll make it fixed and other just normal. Also you have ready a Nav widget, so will be ready the menu for responsive too if you use them.


#6

hello again @Deni_1990

I tried your above feedback and it worked great.
Now, I am not sure why some of the elements do not go behind the fade in nav?

As you scroll, you will notice some parts of the page go behind the fade in nav, and other on top.
Is there a way to have everything go under the nav? Thanks again for all your help so far, it is appreciated.

https://webflow.com/design/in-my-lifetime?preview=e189d5ad8972b2565cd04cfa092f228d


#7

@fnd

Try to give a z-index to nav-scroll and everything will work great!


#8

amazing. I can't thank you enough for your help. Thanks again @Deni_1990!


#9