-
Hi
I’m having trouble hiding headed controls between mobile and desktop. I’ve used the pre rolled css classes, but I’m getting flashes of the controls at the very head of the browser, then they disappear.I also have a full width control underneath the sticky header in mobile layout, and the sticky header is slightly overlapping. I’ve set it to 70, but the sticky header is sizing, despite me setting the control to not phase in and out.
Any ideas,
Many thanks everyone,
-
Hi there,
It seems like there’s an error pointing to Cloudflare’s Turnstile on your site, especially when the menu control flashes. Try disabling plugins that use Turnstile and see if the menu flashing issue still occurs.
As for the overlapping sticky bar, you have this CSS:
@media(max-width: 768px) { .sticky-book-consultation-header { top: 80px; } }Just change the
topvalue to90px. -
Thanks Alvin’s, I’ve disabled the plguin causing the issues and modified the css to 90 as suggested, but I still get the flashing of components not supposed to load on a mobile device. Strange. Any other suggestions? Thanks for all the help!
-
Hi there,
your site is using PerfMatters and some if its Used CSS is still being loaded on the site. Which is causing that issue.
Speak with PerfMatters support about resolving that. -
Hi David,
Thanks matey, I cleared something in perfmatters, and it seems to be working fine now.
Out of interest, which optimiser do you find works best with generate blocks. New to this and have WP rocket (default install – no features installed) and perfmatters installed (some optimisers set). What are your thoughts?Thanks again.
-
My personal preference for optimization is PerfMatters. And Page / OP Caching on the server.
But you can achieve much of the same with WP Rocket or Flying Scripts etc and some functions.The main thing is DO NOT use 2 plugins that do the same thing, as they will conflict.
-
Thanks very much!
-
You’re welcome
-
Hi Guys,
Another related Q to the sticky header… I’m pretty much there, but on the mobile / tablet view, the sticky header grows and shrinks a bit. I have a static bar set to 90 position directly under the sticky header.
I’d either like to:
1. Glue the static bar under the sticky header to the header, so it moved slightly with it
OR
2. Make the sticky header not grow and shrink slightly. I’ve set the sticky header ‘transition’ to none, but this hasn’t made any impact (not too sure if this is the purpose of the setting.Thanks everyone!
-
You can try adding this CSS to make the static bar sticky:
.gb-container-b91d447e { position: sticky; top: 70px; z-index: 99; } -
Thanks, it is sticky, it’s just that as you scroll the height adjusts slightly, and the logo enlarges / shrinks etc. when it does so, there are small momentary gaps between sticky header and the static bar I have in place
-
If you want the static bar to stick to the navigation then that requires some hoop jumping and a different layout.
The method would be as follows, and it requires some compromises:
1. in Customizer > Layout > Header, activate the Navigation as header.
2. in Customizer > Layout > Navigation, set the Nav and Inner Navigation to Full Width.
3. in Appearance > Elements -> Add New –> Block element, this will he for your static bar below the nav.
3.1 in the elements settings sidebar set to the hook toafter_primary_menu
3.2 set the display rules Location toentire site
3.3 Now in the editor build your static bar, starting with a Container Block that has a Sizing > Width of100%Now build the content inside that bar.That will make the static bar part of the navigation and the sticky nav. No CSS required and they will transition together.
- You must be logged in to reply to this topic.