Streaming live at 10am (PST)

Fixed Nav Bar that resizes scrolling

Hi I’m new to the forum. Have used webflow on a couple of sites. Have done a search and can’t find what I’m looking for sorry I’m sure it’s already been covered. Found a few that might have helped but the links were dead.

Is there a tutorial anywhere that shows how to have a resizing nav bar. Like the link below where the logo, nav bar height etc. resizes when you scroll a little way down. I like the slow smooth resizing.

http://netdna.webdesignerdepot.com/uploads7/how-to-create-a-resizing-menu-bar/

Many thanks


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2 Likes

Hello @thesaint

Something like this > https://navbar-resize.webflow.io/

Piter :webflow_heart:

Hi Piter,

Thanks, yes very similar, would want it to resize much earlier in the scroll down and also resize the logo.

Is there a tutorial on how I would do it?

Thanks again,

1 Like

Not sure about a tutorial, but I can share the project with you and you can clone and reverse engineer.

Here’s a link > https://webflow.com/website/Navbar-resize

Right now I’m triggering the interaction right after the hero section.

Piter :webflow_heart:

Thanks for that Piter, I’ll give that a go. It’ll be a good opportunity to do some learning. I’ve found the best way to learn with webflow is to try a create different things.

Hoping it’s getting colder for you soon as I’ll be in Sofia in 3 weeks for Skiing in Bansko (again).

Thanks again

2 Likes

Really? Where you from? Maaan :smile: So happy to hear that! It’s cold here, but the winter is not very snowy…You can see a live cam from Bansko > https://www.banskoski.com/en/webcams

Big YES about the learning! Doing is the best teacher. Trying, failing and keep moving :smile:

:webflow_heart:

Thanks Piter, coming from Yorkshire in UK.

I’m having problem with the cloning. It seams to be stripping something out. I can still open the good version in webflow though (can’t save that version). Will try and work it out. Thanks again.

1 Like

Hey @thesaint

Share your read-only link if you need some help :blush:

Piter :webflow_heart:

Hi,
I’m having some problems making this work. If anyone can point me in the right direction that would be great.
The smaller menu should appear (smoothly would be best) after the artists impression disappears. Something is happening at that point.
Thanks

Hey guys! I know this is an old post but my hope is that someone will help me out.

I am trying to make a similar menu like this one https://navbar-resize.webflow.io/ but with a few adjustments. I attached an image with the menu.

  1. The main NavBar is fixed at the top with transparency
  2. When the page has scrolled down the menu gets smaller, the logo is scaled-down and a background color of the NavBar is shown.
  3. On scroll-up the menu is still small, but only when it gets across the first section gets back to the initial state

I’m starting to struggle in achieving this effect. Any ideas on how can I do it, please?

Thanks!

Hey @stefanasafti - did you find an answer?

Hey Jaime. Nope I didn’t.

Damn - I haven’t got it to work either. I guess I’ll do the “hide and reveal on scroll” for now. Thanks!