Fixed Nav Bar that resizes scrolling

thesaint · February 8, 2019, 4:19pm

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)

PeterDimitrov · February 8, 2019, 4:31pm

Hello @thesaint

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

Piter

thesaint · February 8, 2019, 7:28pm

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,

PeterDimitrov · February 8, 2019, 8:06pm

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

thesaint · February 8, 2019, 9:04pm

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

PeterDimitrov · February 8, 2019, 9:34pm

Really? Where you from? Maaan So happy to hear that! It’s cold here, but the winter is not very snowy…You can see a live cam from Bansko > Banskoski - Webcams

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

thesaint · February 9, 2019, 3:51pm

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.

PeterDimitrov · February 10, 2019, 9:21am

Hey @thesaint

Share your read-only link if you need some help

Piter

thesaint · February 13, 2019, 11:06am

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
https://webflow.com/website/the-barn-regeneration-project?s=the-barn-regeneration-project

stefanasafti · December 28, 2020, 10:34pm

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.

The main NavBar is fixed at the top with transparency
When the page has scrolled down the menu gets smaller, the logo is scaled-down and a background color of the NavBar is shown.
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!

Jaime_Rosen · March 8, 2021, 6:52pm

Hey @stefanasafti - did you find an answer?

stefanasafti · March 8, 2021, 6:53pm

Hey Jaime. Nope I didn’t.

Jaime_Rosen · March 8, 2021, 6:56pm

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