-
I would like to enable the sticky header and the header search. However, when I do this it seems to break in production. The search shows up with an x next to it and it is linked to #, which takes me to the bottom of the page. Not what I want. Also, the entire sticky header itself shrinks and shifts after scrolling.
I suspect this has something to do with WPRocket. In WPRocket I’ve tried excluding:
/wp-content/plugins/gp-premium/menu-plus/functions/js/sticky*.js
But this did not work.
Is the sticky header not compatible with WPRocket? Or am I missing something else here?
-
Hi there,
If you don’t want the transition of the sticky nav, you can use simple CSS solution, so no JS will be loaded.
If you can provide your site link, I can write the CSS for you.
Let me know 🙂
-
Sure, included the site below.
-
Try this CSS for sticky header:
.site-header, #mobile-header { position: sticky; top: 0; z-index: 1000; }The search issue is weird. can you disable all plugins except GP Premium to test?
-
I added the css and it is not working. I see if I can disable all plugins on staging.
-
I added the css and it is not working. I see if I can disable all plugins on staging.
How did you add the CSS?
-
I put it into simple css.
-
I inspected your homepage, and the stylesheet of Simple CSS is empty, which means the CSS hasn’t been added in.
https://app.screencast.com/vv5iCUC49HJenDo you have a cache plugin? Did you clear cache after adding the CSS?
And can you try adding the CSS to customizer > additional CSS?
-
yes I cleared the wpengine cache and also the wprocket cache.
-
Now it’s sticky. Please check!
-
I think I got this all working now, including the search. Can you please confirm?
-
All yeah, everything is working now 🙂
-
The sticky header isn’t working on mobile. Is there a way to make it work?
-
You are using a mobile header on mobile, I’ve updated the CSS:
https://generate.support/topic/sticky-header-3/#post-156528 -
This is great, thank you.
-
You are welcome 🙂
- You must be logged in to reply to this topic.