Shrink and expand nav bar on scroll like the www.thestartersclub.com

Hi,

I would like to shrink and expand my nav bar, very similar to the way it’s done on this site www.thestartersclub.com. I would like to shrink the logo, hide the text above the menu text, move the menu text up, and shorten the height of the nav bar, all when it reaches the services section of my site. I would also only like this interaction to only affect desktop view. Additionally, because there will be several pages, there interaction should not be dependent on anything in the page that is currently viewed.

My website: https://preview.webflow.com/preview/bluelakecreative?preview=68cfbfda25786cb12e08e263487bbcaa

As thorough and as detailed instruction on how to do this would be greatly appreciated.

Best,

Nathan

So there are probably a couple ways to approach this. I know you said you would prefer not to link the interaction to a section but I think through Webflow you would need to. But you could build just one interaction and attach the effect to the first or section of each page. The interaction would look something like the below and take just a few minutes to build.

Or you could use the script below in custom code and change the classes of the items in question…I’m not a script expert so it was provided by another user…the transition is rough and I’ve not sorted out how to make it smooth.




This would be to shrink the logo width

jQuery(document).ready(function() {
//section id goes here
var aa = jQuery(“#idassigned”);
//where the magic happens
jQuery(window).scroll(function() {
//adjust the number to fit distance from the top of page to the section
if( jQuery(this).scrollTop() > 720 ) {
aa.addClass(“shrink”);
} else {
aa.removeClass(“shrink”);
}
});
});

the CSS

.shrink {
width: 200px;
}

Thanks jdesign for the reply.

I’m not sure that solution is quite it, but it does sound like custom code would have to be inserted in webflow or after the fact.

Anybody else have any thoughts or solutions?

Best,

Nathan

Did the script not work? It should work to add any class to specific elements. You would need to target each individual element. So you would assign an id to the element (logo) and have it shrink. Then use the script again to target the other ids and change the classes.

I’ve used the script with Webflow before so it should work… maybe I did fully understand your question. Sorry, it didn’t work and I’m sure someone will be able to answer your question.

Hey jdesign,

Thanks for that reply. I guess I need something something smoother. Also, there a few other additional things that need to happen…nav text disappears above menu items, and possible movement of menu up, depending on what happens once the nav text disappears. To have it all happen smoothly would be amazingly awesome as well as in harmony. Also, I want it to everything to return to its original state once one scrolls back all the way to the top, just like the sample url.

Thoughts?

So the script worked just not like you expected? For the additional things you would need to target each element…for example, give the “nav text” an ID, create a class like “.hide-nav-text”, add CSS .hide-nav-text { display: none;}, copy the same script used for shrinking logo then change the ID to the one you gave “nav text” and change the class to “.hide-nav-text”. The you would use the same principal for the others.

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