Box Shadow after scroll

  • Resolved Michał

    (@vspyze)


    3 years, 11 months ago

    Hello, I would like to add box shadow on my menu after 30px scroll.

    I found this article: https://ww.wp.xz.cn/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 to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Contributor Robert Wattner

    (@rwattner)

    3 years, 11 months ago

    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

    (@rwattner)

    3 years, 10 months ago

    Did this help? If so, I’m going to mark this resolved. Thanks

    Thread Starter Michał

    (@vspyze)

    3 years, 10 months ago

    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/

    Plugin Contributor Robert Wattner

    (@rwattner)

    3 years, 10 months ago

    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ł

    (@vspyze)

    3 years, 10 months ago

    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

    (@rwattner)

    3 years, 10 months ago

    .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

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

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