[Support request] Ads & plugins appearing over sticky header

Home Forums Support [Support request] Ads & plugins appearing over sticky header

Home Forums Support Ads & plugins appearing over sticky header

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #2055282
    Dmitrii

    My ads and table of contents appear over my stick header whenever I scroll down / past them.

    What’s the best way to fix this? Added my website link.

    #2055417
    David
    Staff
    Customer Support

    Hi there,

    try adding this CSS to increase the sticky nav / mobile headers z-index:

    #mobile-header,
    .sticky-enabled .main-navigation.is_stuck {
        z-index: 1000000 !important;
    }
    #2055444
    Dmitrii

    Thanks David – it was happening on desktop as well, but it seems my desktop header is no longer sticky, so I can’t show an example of it.

    So:
    – How could I make the header “sticky” again on desktop?
    – How should I modify the code so that it applies to all devices (desktop, tablet, mobile)

    Thanks!

    #2055457
    David
    Staff
    Customer Support

    In Customizer > Layout > Sticky Navigation, make sure that is enabled and set it to Desktop only as your Mobile Header is enabled and already sticky..

    The CSS i provided covers the desktop and mobile sticky.

    #2055503
    Dmitrii

    Thanks David, I tried that earlier, but the header actually changes significantly.

    Is there a way to keep it sticky and retain exactly how it appears when you first land on the page? Same height, spacing, etc.

    #2055512
    David
    Staff
    Customer Support

    Disable the Sticky Nav.
    Keep the CSS i provided earlier.
    And add this CSS:

    @media(min-width: 769px) {
        .site-header {
            position: -webkit-sticky;
            position: sticky;
            top: 0;
            z-index: 1000000;
        }
    }
    #2056376
    Dmitrii

    It seems to be working on mobile & tablet, but not desktop.

    And now the header does not appear on mobile for the first 3-5 seconds (there’s a delay before it appears).

    #2056569
    David
    Staff
    Customer Support

    It looks fine to me on Desktop.
    Mobile issues – i don’t see a delay in the header appearing, but I do see an issue with the mobile menu opening and that is due to some Javascript optimizations on the site thats deferring the scripts until user interaction. Might want to check with the optimization plugin author on that.

    #2057312
    Dmitrii

    I’ve tried it on 4 different devices (all running Chrome) – and the issue still appears: https://pasteboard.co/gphJlCjCE1rl.png

    Noted on the optimization plugin

    #2057756
    David
    Staff
    Customer Support
    #2058295
    Dmitrii

    Thanks David, that worked perfectly!

    Appreciate you driving this home, really happy with the support I’ve received :).

    #2058373
    David
    Staff
    Customer Support

    Awesome – glad to be of help!

    #2065474
    Dmitrii

    This worked really (maybe too well :D)!

    Is it possible to have the sticky header appear only when people scroll up (as opposed to always sticky / always visible)?

    Thanks!

    #2065545
    David
    Staff
    Customer Support

    Not using the CSS method, you would need to remove the CSS i provided and then re-enable the Themes sticky options…. we can the relook at the original issue.

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