Title: Box Shadow after scroll
Last modified: July 11, 2022

---

# Box Shadow after scroll

 *  Resolved [Michał](https://wordpress.org/support/users/vspyze/)
 * (@vspyze)
 * [3 years, 11 months ago](https://wordpress.org/support/topic/box-shadow-after-scroll/)
 * Hello, I would like to add box shadow on my menu after 30px scroll.
 * I found this article: [https://wordpress.org/support/topic/box-shadow-after-scrolling/](https://wordpress.org/support/topic/box-shadow-after-scrolling/)
   but it doesnt help me and I dont understand how just only pasting box shadow 
   CSS code will trigger it after 30px. I havent found any option to add CSS in 
   Sticky Header Effects plugin or option to customize box shadow.
 * I know how to add CSS box shadow code, but I dont know how to show it only after
   30px scroll. Please help me, I tried everything 🙁
 * Thank you in advance.
 * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fbox-shadow-after-scroll%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

Viewing 6 replies - 1 through 6 (of 6 total)

 *  Plugin Contributor [Robert Wattner](https://wordpress.org/support/users/rwattner/)
 * (@rwattner)
 * [3 years, 11 months ago](https://wordpress.org/support/topic/box-shadow-after-scroll/#post-15816671)
 * Hi, if you are using my plugin and have the scroll distance set to 30px you can
   use this code wherever you keep your css.
 *     ```
       .she-header {
       	box-shadow: 10px 10px 10px red;
       }
       ```
   
 * If you want to use my plugin at a different scroll distance and only have the
   shadow at 30px then go to your header > advanced > motion effects > effects offset
   > set to 30, and use this code in advanced > custom css of THAT header
 *     ```
       selector {
       	transition: all 0.4s ease-in-out;
       }
   
       .selector.elementor-sticky--effects {
       	box-shadow: 10px 10px 10px red;
       }
       ```
   
 * Let me know if this helps
 *  Plugin Contributor [Robert Wattner](https://wordpress.org/support/users/rwattner/)
 * (@rwattner)
 * [3 years, 11 months ago](https://wordpress.org/support/topic/box-shadow-after-scroll/#post-15829614)
 * Did this help? If so, I’m going to mark this resolved. Thanks
 *  Thread Starter [Michał](https://wordpress.org/support/users/vspyze/)
 * (@vspyze)
 * [3 years, 11 months ago](https://wordpress.org/support/topic/box-shadow-after-scroll/#post-15829933)
 * Hi, first method doesnt help. I set your plugin to 30 px and added following 
   css code. Shadow is visible instantly, instead of being showed after 30 px. How
   can I fix that? Thanks.
 * There is a link to website which I work on: [https://yanoyasolution.eu/](https://yanoyasolution.eu/)
 *  Plugin Contributor [Robert Wattner](https://wordpress.org/support/users/rwattner/)
 * (@rwattner)
 * [3 years, 11 months ago](https://wordpress.org/support/topic/box-shadow-after-scroll/#post-15829947)
 * I just looked at your site and I see the box shadow is coming from this code
 *     ```
       .naglowek {
       	box-shadow: 10px 10px 10px red;
       }
       ```
   
 * With your current settings, this code works on your site for me
 *     ```
       .she-header {
       	box-shadow: 10px 10px 10px red;
       }
       ```
   
 * I personally think this looks good on your site
 *     ```
       .she-header {
       	box-shadow: 0px 0px 30px rgb(255 255 255 / 10%);
       }
       ```
   
 * Let me know if you get it working. Good luck!
 *  Thread Starter [Michał](https://wordpress.org/support/users/vspyze/)
 * (@vspyze)
 * [3 years, 11 months ago](https://wordpress.org/support/topic/box-shadow-after-scroll/#post-15830001)
 * It works, thank you!! But why only .she-header class works and other dont? I 
   added class .naglowek in advanced settings of elementor section and it doesnt
   work
 *  Plugin Contributor [Robert Wattner](https://wordpress.org/support/users/rwattner/)
 * (@rwattner)
 * [3 years, 11 months ago](https://wordpress.org/support/topic/box-shadow-after-scroll/#post-15830167)
 * .she-header is the class that my plugin adds to the header at the scroll distance.
   So, at 30px, .she-header is applied along with it’s box shadow. The class that
   you addded is there all the time, so was it’s box-shadow.
    I’m glad we got it
   figured out for you. Have a good one!
 * [Leave a review](https://wordpress.org/support/plugin/sticky-header-effects-for-elementor/reviews/#new-post)
    -  This reply was modified 3 years, 11 months ago by [Robert Wattner](https://wordpress.org/support/users/rwattner/).

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘Box Shadow after scroll’ is closed to new replies.

 * ![](https://ps.w.org/sticky-header-effects-for-elementor/assets/icon-256x256.
   gif?rev=3301413)
 * [Sticky Header Effects for Elementor](https://wordpress.org/plugins/sticky-header-effects-for-elementor/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/sticky-header-effects-for-elementor/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/sticky-header-effects-for-elementor/)
 * [Active Topics](https://wordpress.org/support/plugin/sticky-header-effects-for-elementor/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/sticky-header-effects-for-elementor/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/sticky-header-effects-for-elementor/reviews/)

 * 6 replies
 * 2 participants
 * Last reply from: [Robert Wattner](https://wordpress.org/support/users/rwattner/)
 * Last activity: [3 years, 11 months ago](https://wordpress.org/support/topic/box-shadow-after-scroll/#post-15830167)
 * Status: resolved