Have a sticky section in Divi and need to style elements when the section becomes sticky? Let’s explore how to target and style these elements using some handy CSS tricks.
The Challenge
Suppose you have a section in Divi that you’ve set to be sticky. Within this section, you have various modules, like text modules. When the section sticks, you want these modules to change styles – for example, changing the text color. Divi’s visual builder doesn't provide built-in sticky options for individual modules inside a sticky section.
The Solution
You'll need to use a bit of custom CSS. When a section becomes sticky in Divi, it automatically gets the et_pb_sticky class. By leveraging this class, you can create custom styles for elements within your sticky section.
Step-by-Step Guide
1. Assign an ID to Your Sticky Section
Open your sticky section settings.
Go to the Advanced tab and find the CSS ID & Classes section.
Assign an ID to your section (e.g., my-sticky-section).
2. Add Custom CSS
Go to the "Divi Theme Options > General > Custom CSS" box or your child theme’s stylesheet.
Add the CSS such as this example
#my-sticky-section.et_pb_sticky .et_pb_text {
color: green;
}This CSS rule targets any text module (.et_pb_text) within your sticky section when it gets the et_pb_sticky class, changing the text color to green.
Conclusion
With a simple CSS snippet, you can effectively style elements inside a sticky section in Divi. This approach gives you greater control and customization possibilities, ensuring that your design looks perfect, even when elements stick to the viewport.
0 Comments