AMP Stops sticky menu in Kadence theme

Thanks for reaching out. I’ve tested the same and I can confirm the same with this particular configuration with the Kadence theme. Please allow me some time to review this non default setting so I can apply you with a solution.

Hi
That’s brilliant many thanks
Cheers
Michael

Hi Michael,

Apologies for the delayed response. Can you try adding the following to your WordPress customizer (Appearance > Customize > Kadence > Additional CSS)?

html[amp] #mobile-header {
    height: 80px !important;
}

html[amp] .site-header-inner-wrap.kadence-sticky-header {
    position: fixed !important;
    left: 0 !important;
    right: 0!important;
    z-index: 1200!important;
    background-color: #fff;
}

After adding the above please check your AMP URLs from a mobile device.

Note that the above is a temporary workaround. I’ve emailed the Kadence team enquiring about making this configuration fully AMP compatible. Let me know how you get on anyway.

Hello
that’s brilliant many thanks. I’m not technical … do I add this to the header in the “header footer scripts ” plugin for all pages?
Cheers
Michael

• This reply was modified 3 years, 8 months ago by apis67.

Yep that worked
Again many thanks for all your help

Sorry, I spoke too soon … it’s not working. We had the LiteSpeed cache turned off and when we turned it on again the menu stopped working

Hello @apis67

If you are using LiteSpeed cache plugin can you please try this mini plugin it will suppress all frontend optimization on AMP page.

We have also request code changes that will improve AMP compatibility with the LiteSpeed cache plugin.

Hi,

While full support of sticky is fairly complex because of all the options that Kadence provides. For example, it uses a javascript listener to toggle into sticky mode and change classes so that different CSS styling can be applied from settings in the customizer. From what I gather something like that isn’t something you can do in AMP.

However, a basic option with CSS is possible and I’ll offer this as an alternative to what @jamesosborne wrote above.

html[amp] #masthead {
    position: sticky;
    top: 0;
    z-index: 10000;
}
html[amp] body.admin-bar #masthead {
    top: 46px;
}
@media screen and (min-width: 783px) {
html[amp] body.admin-bar .kadence-sticky-header {
    top: 32px;
}
}

html[amp] #wrapper, html[amp] body.footer-on-bottom #wrapper {
    overflow: visible;
    display: block;
    position: relative;
}

I hope that helps!

Ben

Hi Ben
Many thanks for this … yep it works. ??
Cheers
Michael