Nov 24, 2019
Back to all Elements
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)
Whenever possible, use Class Names to target the elements in your interaction. You never know when you'll need to duplicate and use it somewhere else...
Convert the Workspaces dropdown to an open sidebar with custom order.
A (custom code) solution that combines CSS variables and Vanilla JavaScript for the shrinking / growing of browser top & bottom bars.
.png)
Using a little bit of jQuery to adjust the success message height
.png)
