Just under a year ago, I posted a tutorial explaining how to change the Divi menu on scroll using a little jQuery. Now with Divi’s new Sticky Options you can do it right out of the box, without having to insert your own jQuery.

These new sticky styles are brilliant. Standard position: sticky CSS makes elements stick in place on the screen within their containing element as the user scrolls. Divi’s sticky controls do this, but they go further than standard CSS as they allow you to set different styles for elements when they’re stuck to when they’re unstuck, animating smoothly between them. This is ideal for animating a header unobtrusively as the user scrolls down the page.

This is very powerful. Nearly every property you can set in Divi’s section, row, column or module settings dialogs can now be assigned to a sticky state, just as you can assign specific styles for device sizes and hover states. This can be done for any part of the page, not just headers, but also main body content, footers or any individual modules within them.

In this tutorial, I’m going to show you how to make a header containing a menu and logo stick to the top of the page, then shrink and change colour when the user scrolls down the page.

This is what we’ll create:

Animated sticky menu

Before we begin, I’m expecting you to already have created a header in Divi Theme Builder with a menu and logo.

Let’s get started.

1

Open the relevant header in your Divi Theme Builder and open the Section Settings dialog

2

Navigate to Advanced > Position and reset it to the default, which is relative. It may be prudent to set a high z-index here while you’re at it.

Divi position settings dialog box

3

Open Scroll Effects and change the Sticky Position to Stick to Top.

Divi scroll effects settings dialog box

4

To make the header overlap page content like in the example above we’ll need the header to sit outside of the position flow of elements on the page. So, open Custom CSS and add
position: fixed;

5

Now you’ve set the section to stick, when you hover over a setting title you’ll see a new pin icon. This allows you to set a sticky style. Click the pin icon then select the pin tab and replace the

position: fixed;

CSS with any custom CSS style you’d like Divi to use on the section only when users scroll. For the result I’m aiming for I’ll add

backdrop-filter: blur(15px);

here (this CSS property isn’t adopted by all browsers yet so make sure to use a fallback).

Divi module CSS dialog box

6

Navigate to the section Background and click the pin icon here too and set a unique background for the section to be shown when the section sticks on scroll. I’m adding a 60% opacity background using RGBA values of

rgba(0,0,0,0.6)

to complement the background blur set previously.

Divi module background settings dialog box

7

The last change to make is to set top and bottom padding for both the resting state (10px) and sticky state (0px) for the section.

Divi padding settings dialog box

That’s it. Now you have a header that looks clean and simple on a dark header but gains extra contrast and a slimmer look as the user scrolls down the page.

Author: Aidan Ashby

Aidan is a web and branding designer living in Northampton, UK. He’s a cautious optimist and is loathe to discuss himself in the third person. He loves pancakes and has a perpetual desire to just be sat in the woods with his feet up in front of a bonfire.

Connect with Aidan on LinkedIn.

You may also like…

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

Sign up to receive helpful free design tips in your inbox

Sign up to receive helpful free design tips in your inbox

Join our mailing list to receive the latest blog posts and updates from our team.

Includes a free download of our Good Nook font.

Thanks, you've been subscribed.