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:
Selected Nav bar
Under settings, adjusted position to “fixed,” then “top”
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?)
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.
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?
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?
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!
