[Resolved] Sticky Navigation > CSS for the box shadow on scroll?

Home Forums Support Sticky Navigation > CSS for the box shadow on scroll?

  • This topic has 5 replies, 3 voices, and was last updated 1 year ago by Tom.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #995402
    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

    #995623
    Leo
    Staff
    Customer Support

    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.

    #995644
    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

    #995998
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #996192
    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

    #996558
    Tom
    Lead Developer
    Lead Developer

    No problem – glad you found a solution 🙂

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.