Navigation Shadow on Scroll

Though this is an effect you can also add through the built in interactions, the specific fuctionality is left out to be able to add and remove shadows through user-interaction.

You can instead add a separate div that hides and appears on scroll, but when it's just as easy to add as custom code, why complicate things?

Here's the code to add in your project settings before the </body> tag:

<script>
let navContent = document.getElementById('main-navigation');
$(window).scroll(function() {    
if($(window).scrollTop() > 0) {        
navContent.style.boxShadow = '0 1px 0px #e8e9ee';
navContent.style.transition = 'all 0.2s';    
} else {        
navContent.style.boxShadow = '0 0 0 rgba(0, 0, 0, 0)';
navContent.style.transition = 'all 0.2s';  
}
});
</script>

The code makes it so if a user hasn't scrolled, no shadow will be visible, and as soon as they scroll, the nav div will have a shadow added.

You'll need to add the ID 'main-navigation' to your navigation div, but other then that, all you need to do is style the shadow.

In the example above, '0px 1px 0px #e8e9ee' translates to:

Horizontal movement - 0px (no movement) Vertical movement - 1px (go down a pixel so we can see the shadow) Blur - 0px (no blur: this is the one you can play with to get your desired effect) Colour - #e8e9ee (this is a subtle grey I like, but change to any colour you want)

If you're new to styling box shadows, play around with the example here.