Hello @ravin30000,
Let’s go step by step, shall we? :)
First of all we have to determine what your class name is.
Webflow while you export your website or push it to public changes the class names a little bit. All letters become small letters and spaces are changed to dash
"-"
. As we can see on the pic above your class in Webflow is called
Navigation Section
. That means your published website will change its name to
.navigation-section
. Notice the dot
"."
at the beginning - for jQuery code it notifies the code to look for a class with the following name.
Once we know what your classname is we have to change the code a little bit by selecting proper classname as a target. In the code I have provided you can see .navbar
as a classname in line 4
and 6
- This is where I target the proper object on the website. We have to change the target classname and also the color in which the navbar should appear.
We can clearly see it’s #ff3859
so we should apply that to the code as well.
$(document).ready(function() {
$(window).scroll(function() {
if($(window).scrollTop()>0) {
$('.navigation-section').style('background-color', 'transparent');
} else {
$('.navigation-section').style('background-color', '#ff3859');
}
});
});
The code I have given you above should be placed in the Custom Code in your site dashboard. Let me quickly explain to you what are the differences of the custom code. As you can see Webflow has 2 spots in which we can put code - head and footer code.
The head code
is mostly used for styles. Actually in this task we should put something there, because when the site loads the navbar should be transparent, yet you want it to be fullcolor while in Webflow Designer mode. Let’s then put the following code in the head code
.
<style>
.navigation-section { background: transparent; }
</style>
Thanks to this piece of code you will have full color of navbar set in Webflow Designer mode, but on site load it will change to transparent. Now let’s go to footer code
. This is the place where all (well… most) of my ninja skills take place. In footer code we place all the Custom Code as this is something that is “called” after everything on website has loaded. The code here (if it is javascript or related) should be placed inside <script>...</script>
tags. Please put the code I have given you above in here wrapped in <script></script>
tags as shown on the picture below.
Now all you have to do is hit and publish the website to see changes. Remember that custom code and scripts are not visible within Designer Mode.
Yeah... another great tutorial written :) If you have any troubles going through implementation of this feel free to ask here on forum, but please make sure you publish the website and gives us the link to it :) (ritenow.webflow.io?)
Best,
Bartosz