Sticky Navigation > CSS for the box shadow on scroll?

[Christian]

Dear GeneratePress Support Team,

the GP Sticky Navigation default behavior is to only show a shadow on scroll.
This works wonderfully.
I would like to replicate this behavior on another stuck/sticky element (reight below the Sticky Navigation) and assume there is some inbuilt “sticky-kit” or any kind of library?
I found this code for GP’s Sticky Navigation bar behavior:

.sticky-enabled .main-navigation.is_stuck {
box-shadow: 0 2px 2px -2px rgba(0,0,0,.2);
}

I try to use this code for the element I want to show a shadow on scroll. I gave the element a css-class: .class-breadcrumb-box
hoping I could use the class like so:

.sticky-enabled .class-breadcrumb-box.is_stuck {
box-shadow: 0 2px 2px -2px rgba(0,0,0,.2);
}

and the element would show a shadow on scroll – however, nothing happens.
After some research I decided to ask you if my thinking (“There is any kind of inbuild function or library) is completely off – or if there is any easy workaround to show a shadow on scroll?

Thank you for any consideration,
Best,
Chris

[Leo]

Hi there,

Our sticky navigation is using javascript so those sticky classes are only added when you start scrolling/activate the sticky navigation.

I don’t see other sticky elements in the page you linked? If it has extra classes added in sticky mode then you can likely target it to apply a shadow.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Christian]

Hello Leo,
thank you for your reply.
Ah, I see. I have to add an extra class to the sticky mode?
You can see the sticky element (the breadcrumbs) directly below the navigation bar e.g. here.
You are right, on the provided page (frontpage) it is missing.
On the mentioned page e.g. it has the class .class-breadcrumb-box and in the inspector I find the following:
.elementor-sticky–active {
z-index: 99;
}

and fiddled around with it but to no avail.
If you have a sudden idea on some code, I would be happy – however, since I now think that is beyond the scope of Theme support please do not put energy into it.
Thank you for everything you provide with GeneratePress,
Best,
Chris

[Tom]

Hi there,

I just took a look and it looks like the breadcrumbs are within the sticky element with the box-shadow. Did you figure it out?

Let us know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Christian]

Dear Tom,

thank you for your follow up! I was able to achieve it with the help of an Elementor plugin which creates a bottom border on page scroll.
However, the whole solution did not feel clean, visually and technically.
So now I ditched the idea of a permanently visible breadcrumb navigation in favor of a clear design and technical “cleanliness”.
Anyway, thank you so much for your willingness to guide me,
Best,
Chris

[Tom]

No problem – glad you found a solution 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts