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:
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.
3
Open Scroll Effects and change the Sticky Position to Stick to Top.
4
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).
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.
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.
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.
When I add the custom CSS “position: fixed;” all of the modules in my header move to the top left, and I am unsure how to resolve this issue.
Does it appear like that on the front end too? You may have to manually set widths to 100%.