WAIT: Mobile menu showing on page load

Browser: Brave
OS: macOS

When you load the page for first time, the menu menu shows for a split second before hiding. I thought it was just my site but I saw it was an issue on someone elses bricks site too. For now I have display: none on the mobile menu and am toggling a class to show it.

Hi @yasmine,

do you have a link to one of the websites, where we can see this?

Thank you.
Matej

Yes, and I just upgraded to 1.11 but still seeing the issue. On the desktop size, I have implemented a manual display: none so you will not see the issue but as you load the page on a smaller screen size, you will see. I am also having an issue (unsure if related) where the header makes the page flicker.
Link: Summary of "Democratizing Foreign Policy: Parliamentary Oversight of Treaty Ratification in Pakistan"

Hi @yasmine,

you seem to have interaction on this element here (menu), if you remove this one, I believe it will not show the menu on page load anymore.

About the issue with the flickering header, I see that you create these breadcrumbs with a Code block, where you also define some CSS, right?
Can you try to define these CSS styles above the breadcrumbs element, maybe even inside Settings → Page Settings > Custom CSS or inside WP Dashboard → Bricks → Settings → Custom Code → Custom CSS?

Let me know if those two things solve the problem :slight_smile:

Matej

Thank you, 50% solved! I removed the interaction. I thought the interaction was needed to make it slide but realise Bricks had that already set up! Huge thank you.

Just had another test and I think it flickers less, but it still gets stuck on a flicker. Now assuming its when the sticky header is above other elements.

Should I have all the CSS in the page settings (which will make it a bit hard to manage)? Or is there a specific type of CSS that when the header is masking, causes the conflict?

Hi.
I’m happy to hear about the interaction.

For a flickering, no need to move everything to global CSS, just try to move this part and it might solve it :slight_smile:

Sorry I forgot to mention that I had done that already! And issue still there, I thought it could have been when hovering other elements with custom CSS?

So,

I’ve checked again and I’ve disabled the JavaScript. It seems that the JS adds/changes something in the breadcrumbs element or that divider up there.
You probably know what, so maybe just add a CSS in a way, that it will be styled the same as when JS adds/changes things?

Matej

Thank you for checking. I have js and css within shortcodes that are echoed and multiple js blocks and most the design is in each elements css editor.

So I decided would be easiest to deconstruct and I removed every js code, every shortcode, and deleted that top section and I can still get the flicker: Summary of "Rural Piped-Water Enterprises in Cambodia: A Pathway to Women’s Empowerment?"

Could it be caused by the header itself?

Hmm, I don’t see flickering on this link :thinking: Can you record a video on what you click and how you see it, maybe I’m overlooking it here.

It comes only on a scroll up: Jam

I think it is the sticky on scroll setting!

Screenshot 2024-10-18 at 16.08.47

Hi,

I see that you tagged v1.10.3, and I think you still have 1.10.3 installed on a staging website, that you used during the recording of a video, right?
If yes, can you try to update it to 1.11, clear all caches, and try again? We implemented a few fixes for the sticky header.

Let me know please,
Matej

Oops that was an old staging site, and I started this thread before updating. But the issue was there on the live site (1.11). When I turned off “Sticky on scroll” its resolved it

Hmm, now because I’m not sure how to replicate it, can you send temporary login credentials to your test/staging website and a link to this thread to help@bricksbuilder.io using the email address you used during the purchase, so I can take a look?

Thanks.

Hi!!

Any news on that topic? We have the same issue here!

Screenshot attached.

image

Thanks!

Hi,

so, none of the solutions above solved the problem for you? If not, can you confirm that this is the same problem as this one:

Thanks,
Matej

The flicker I fixed by turning off the sticky header and the mobile menu showing on page load was fixed by turning off the interaction!