Streaming live at 10am (PST)

Transition Effects on Most Beautiful Navigation Bar


I would like to make an awesome looking navigation bar in webflow. For my navigation bar to work exactly how I would like it needs the following features.

  1. Transparent to 100% opacity on 1% scroll on all devices (reverts back to transparent state when you on top)
  2. Transitional effect possible using jquery that makes the navigation bar shrink beautifully when scrolling down by 1% and when scrolling back to the top a beautiful expansion effect.
  3. A one page navigational bar that has an editable current state.
  4. Make the navigational bar one page clicks on the same page match the section exactly, adjusting for responsive design

Hope you guys can help, glad to be part of this community

Here is an exact example of what i am trying to do

Here is my public share link: LINK
(how to access public share link)

1 Like

That means you’ll have 2 occurences of your navbar, or at least 2 different backgrounds, to fade from one to another.

You can make that with Webflow without any custom code.

What does this mean?

That’s pretty much out of the box with Webflow.

Well that’s possible.

Design your FIXED navbar and add an underlying element that you’ll use to color the background. Make a OnScroll interaction to shrink the navbar while fading in the background element.

1 Like

You have the bg OK, now make the navbar taller and shrink it with the interaction.

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