Back to all Elements
Simple Mega Nav (Similar to Mailchimp's)
A very simple mega navigation bar, opens on hover and changes background color on scroll.
Creating the Nav element is a short process recorded here.
Once we're done, we can add the short code, that changes the Nav background color when user has scrolled the page x pixels.
<script>
$(window).on("scroll", function() {
if ($(window).scrollTop() > 100) {
$(".mega-nav").addClass("white");
} else {
$(".mega-nav").removeClass("white");
}
});
</script>
We can see that the code adds the '.white' classname to the '.mega-nav'. We need to create this class name in the Designer, or add it manually in code.
Adding it in code will make it less easy to edit / change. Adding it in the Designer without having an element with this this class results in the ability to delete the classname at the Style Manager's Clean-up:
.png)
#StayTheFuckHome. Wash Hands. Wear gloves & mask if you have to leave home.
A fixed background image that is revealed by mouse hover all over the section
.png)
A new and improved version for a Tabs element that automatically change tabs
.png)
Change text in a sentence/headline with Webflow's interactions
.png)