Webflow Navbar Color Change on Scroll - Step-by-Step Tutorial

in this video I'll teach you how to make a Navar background change color on scroll so in this first example website mia. bio we can see that we have a background video in the back and we also see that we have a Navar at the very top with certain colors but you'll notice that when I scroll down the page the Navar instantly has a background effect applied as I scroll down therefore the text in the navbar will not interfere with the text below the actual main content so another example website is midus mvmt.com we can see again we have a full video background and sometimes it might not be a video background it might just be a really really nice full image background but we have the exact same concept where the navbar links and the logos have no background to it and when the user Scrolls down it then has a black background applied so you can actually see if we actually get rid of this back black background it will not look as good so right now I can go into the inspect tool and just get rid of that background effect as you can see just then let me just go back real quick and ticket you can see that it won't work as well so right now you can see the contrast is not that great that's why we need that black background effect in this specific example website so let's go ahead and do this in webflow all right guys so right now I just have a navbar component at the very top and you can go ahead and create a Navar by just following my previous tutorial or you can go ahead and click add right here go to layouts start a library and just drag in a nav bar that you want to use uh just for example so you can understand the premise so right now I've done that and below that I have another background video div that is currently taking 100% width as well as a Min height of 100 dbh so essentially taking the full screen and what I've also done is inside this background video I've replied another div block called overlay test vid and right now I put the position to Absolute and a zindex of two so I want this overlay to be on top of the video and all I've done is just change the color to a black with a 50% OPAC so that's why we have this black effect right here if I actually get rid of this overlay you can see it's a bit bright and it doesn't really show the example very well so again this is only used in very specific cases and what I've done with the Navar right here is I've changed the position from static to fixed and I've in I've made it so it fills in the top by clicking this top button right here and I've also added a z index of 10 uh in this specific case it could have just been any number above two because if it's less than two it will fit below the overlay so for example if I put this to one you can see the overlay is overlaying on top of the Navar because I put that as a z index of two so any Z index the higher the number you would appear more in front think about like Photoshop layers so in this case I'll just put 10 and then you'll notice that everything is good so you can see all the text is white the logo is white everything is contrasting very very well for this hero section I did not bother to put any text but as I scroll down the page you'll notice the Navar is sticking at the top which is exactly what we want but after we go into certain sections let's just stay right here this Gallery section you can see that some of the links we can't really read it that well and it's not that great user experience so one thing we can do is go ahead and just go into the Navar component and change the background color from transparent to let's just say black and problem solved so you can see that we still have the background video right here everything is contrasting very well in navbar as I scroll down you can see that navbar is clearly standing out and it's not protruding any of the content as you can see but let's just say you have a client or you don't really want it to look like this in the hero section you want it to look very very specific and that's partly why we use web flow because of the flexibility so let's go ahead and remove that background color leave it to transparent and what we can do instead is apply an interaction so what we can do is we can hit a z and we can select the body which is essentially the parent div the massive long body it holds every single element we can go ahead and apply interaction hit page trigger and we go ahead and click while page is scrolling then we can go ahead and create a new animation by clicking play scroll animation hit plus and we can go nav BG color change hit enter now we hit a z so we can select the navbar layer right here click Plus at 0% I can go ahead and hit background color and what you can do is you can also affect the class therefore it would affect the class rather than the actual selected div block that way if you use this in every other page it will actually work so right now you can see once I've done this it will automatically create another one at the very bottom at 100% which is fine so the first scroll action we want is we want change the background color to 0% opacity so right now it's set to White at 0% Alpha which is what we want and at 100% what we can do we can go ahead and change the background color in my case to black as you can see it showed you live what it's doing but you'll notice this 0% is starting at the very top of the page and the 100% is at the very bottom of the page so if I actually just click this live preview you can see everything's working you can see where I'm at at the animation and you can see it just takes very very very long all the way down when you scroll all the way to the bottom then the black appears so you can play around with the exact percentage you want if you want this to be instant you can go ahead and change the bottom black background key frame from 100% to 1% now if you hit save you go ahead and just preview the site we have this lovely background video uh it's actually a bird in a car park that I filmed and we have this Navar that's working very very well it's it's contrasting very well and when the user Scrolls down instantly or almost instantly it goes into this black background and as I keep scrolling it's no longer interfering with the rest of the content so I hope you guys found this video helpful I hope you guys understand the premise you can go ahead and just play around with the percentage with the smoing with the background colors all that good stuff but essentially this is how you do it and just keep in mind if you want to use this Navar In a Different Page let's just say for example I right click this and save it as a component and call it nav new and let's just say for example I'll go into a different page let's just say this page here or let's say this page here or let's say this page here and you'll notice that I have all this content here I can go ahead and get rid of this naar in the previous video and go ahead and just add that component that I just saved right here and you'll notice that in this specific example it's actually does not work so you just have to make sure every time you put this new Navar into a new page you want to go ahead and select body right here go interactions hit plus hit while page is scrolling then hit play scroll animation and click navbar color change so you want to make sure that you do that in every single page and you'll notice right here there is no background image so that's why you can't see the white but as I scroll down that is how the effect is applied so just make sure you apply it to the body class and everything is happy days so again hope you guys found this video helpful and I'll see you in the next tutorial peace thank you guys for watching I hope you found this video helpful if you did please leave a like and a comment and if you want more web flow videos and design videos make sure to subscribe and hit the Bell notification I'll be releasing new videos every week and I'll see you guys there

Channel: Derek Siu | Webflow & Web Design

Views: 1,097

Keywords:

Id: 6fjTKrxkg2E

Length: 8min 25sec (505 seconds)

Published: Tue May 14 2024