Trouble Creating Fixed Nav Bar

I am trying to have a scrolling nav bar that will fix to the top of the page. My navbar is currently nested in my hero image. Visually, I do not want the nav bar to be distinct and separate from the hero image but to blend in with the hero image. However, this seems to cause a conflict when trying to keep it fixed.

How can I get the nav bar to be fixed while keeping it part of the hero image?

So far, I’ve taken the following steps to solve this issue with no resolve:

  1. Selected Nav bar
  2. Under settings, adjusted position to “fixed,” then “top”
  3. Adjusted Z index to a higher number (9999)
  4. Raised hero margin

Here is my public share link:

https://preview.webflow.com/preview/josh-parlettes-fabulous-project?preview=74cd52d3cfae94ee58ba5fd8f015a7fb

Hey @jparlette86

To create a sticky (fixed) nav, do the following:

  • Add another nav symbol in a div.
  • Call this div .hidden-nav
  • Style .hidden-nav by adding a background, position: fixed fix it to the top, z-index:999
  • Add display:none and opacity:0 or use transforms. You choose according to what animation you want to use to hide and show the sticky nav.
  • Now create an interaction to let the hidden nav appear when the nav in the hero is scrolled out of view. Make sure you hide it again once the hero nav appears. (You know how to do this?)

Hope this is helpful,
Best of Luck,
Anna K

1 Like

Hi Anna_Kelian,

Thank you for the feedback. Could you possibly walk me through adding the interaction stated in your last bullet point? I’m a little shaky on this. I was able to perform all of the other steps. Thanks again.

Anytime @jparlette86

Sure. Here, I’ll explain how you can make the sticky nav appear sliding down from top and then disappear going back up and out of view:

1- Add this to the .hidden-nav

NOTE: Remove: display:hidden and/or opacity values.

2- Select the nav in the hero by double clicking on it. Now you can add a new interaction to it.

###3- Add a SCROLL interaction with the following settings:

This is for SCROLL INTO VIEW: It will hide the sticky nav bar:

This is for SCROLL OUT OF VIEW: It will show the sticky nav bar:

And you’re done!

Hope this is helpful,
Best of luck,
Anna K

Thank you very much again. I apologize, but it still does not seem to be working. I added the interaction and not sure what else it could be (operator error possibly?) Does it seem like I’m missing anything?

https://preview.webflow.com/preview/josh-parlettes-fabulous-project?preview=74cd52d3cfae94ee58ba5fd8f015a7fb

You’ve applied the interaction to the hidden nav instead of applying it to the nav in the hero.

  • Select the hidden nav and apply interaction:none
  • Select the nav in the hero (double click the symbol) and apply the interaction called Hidden nav to it.

And please, report back.

Thanks

Still nothing. When I adding the scroll interaction and I check Affect Different Element(s), I am entering in the hidden nav div that I created, correct?

Yes correct.

Make your page longer; so, you can scroll to see the effect.

I tried it, and it’s working great!

That’s really weird. I tested it out on my pages that are longer and no interaction is taking place. Not sure what it could be.

Did you add the hidden nav to all pages? It’s working perfectly on the home page.

I see. For some reason I thought the div and nav would carry over to the other pages. I just added a div and nav to another page and am now seeing the interaction. Thanks for all your help!

1 Like

Anytime @jparlette86

Glad I could help.

Good luck with your website.
And don’t forget to show us your work once you’re done.

https://discourse.webflow.com/c/show-tell

One last thing. Is there anything I can do to prevent the scroll interaction from doubling up like this?

Add an offset value of say 5% to the scroll into view in the interaction. Try it with other values until it works.

Report back.
Good luck

I just adjusted the speed from 500ms to 200ms. That seemed to work. Thanks!

1 Like

Works as well :wink:
Good job and good luck with the website.

1 Like

Hi, I really wish someone could make a video of this solution. I’ve tried it and it isn’t working

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