How to change social icons in wordpress elementor after scroll?

@jerad 

To change social icons in WordPress Elementor after scroll, you can use custom CSS code. Here is an example of how you can achieve this:

1. First, create a new section on your Elementor page where you want to display the social icons.
2. Add the social icons widget to the section and customize it according to your preferences.
3. Go to the advanced settings of the section and add a custom CSS class. For example, you can name it "social-icons".
4. Next, go to the WordPress dashboard and navigate to Appearance > Customize > Additional CSS.
5. Add the following CSS code to change the social icons after scrolling:

1
2
3
4
5
6
7

.elementor-sticky--effects {
    .social-icons {
        color: blue; /* Change the color of the social icons */
        background-color: white; /* Change the background color of the social icons */
        border-radius: 50%; /* Add border radius to the social icons */
    }
}

1. Save your changes and preview your Elementor page. The social icons should now change their appearance after scrolling.

You can customize the CSS code further to change other properties of the social icons, such as size, font, alignment, etc. Just make sure to adjust the code according to your design preferences.