Streaming live at 10am (PST)

Navbar interactions not working after publishing website


#1

Hello All . . .
I am trying to apply interactions to my navbar. Sub navbar should hide while scrolling down and visible while scrolling up. my main navbar is fixed. I dont understand where i am going wrong. feeling very confused .

https://preview.webflow.com/preview/shraddhas-radical-project?preview=8e10a16bd9b8ad90d310f6b6caf3ffc3

Also, I cannot see the my navbars aligned properly in browser.
http://shraddhas-radical-project.webflow.io/


#2

You dont need to change the order of the DOM to reveal items on scroll and/or add extra margin. Why you add Animation for the Z and not Y?

The best idea is follow this tutorial STEP by STEP - and learn this issue "trick" because your code is very far from the solution (and its hard to tell you what to change like this):

General Fix navbar:

https://www.w3schools.com/howto/howto_css_fixed_menu.asp

*** I dont know what effect you trying to get because your code is broken. Maybe add reference from other site (or CODEPEN).


#3

i have not used any code for my navbar. I am just trying to apply interaction to hide sub navbar to while scrolling down and make it visible while scrolling up into view.

"You dont need to change the order of the DOM to reveal items on scroll and/or add extra margin. Why you add Animation for the Z and not Y?" i don't understand what this means?

I am looking exactly opposite output that is shown in tutorial.


#4

For the hide/show effect you need to change translateY(move up/down) and not the translateZ (in your animation you make animation on the Z)

On your body you have this interaction (check!):

element.style {
    transform: translateX(0px) translateY(0px) translateZ(-100px);
}

Why? I dont know, but you add "New interaction" to the body and this cuase really wierd results (Its really weird to give the body transform)

If you remove this you get better starting point look like this:

Now again i dont know what you trying to get but from this point try again.

  • only your "navbar-11" (The main/first) is sticky. The second "navbar-10" menu is realtive so you dont add to this nav any sticky trick.

#5

You want effect like this?
http://wicky.nillia.ms/headroom.js/


#6

yes . . . for my sub navbar.


#7

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