Problem: new mobile menu too slow

Hi! Sorry for an extremely late reply.

The new menu css should hide the menu before it loads. Are you sure your phone isn’t using some cached version of the site? Try using a private/incognito tab to load the page with on the phone.

I see your site without issues now, so perhaps you already solved it?

No, Alexander,

this unfortunately is not solved!

If you run my page through Google’s PageSpeed Insights test, the preview thumbs come up exactly as they do on my mobile screens (my phone, my wife’s phone, both Android, and my sister in law’s iPhone). First 2 screens blank, then 3 screens with nothing but menu, then the page. This didn’t use to be like this with previous versions.

Here’s a capture from a test from RIGHT NOW:
https://snipboard.io/P2IoHB.jpg

Okay, sorry for not looking into this earlier.

Here is the CSS we are dealing with that should hide the menu before it loads:

/* menu hide and display */
@media only screen and (min-width: 720px) {
	.mobile-menu #wrap-nav-mobile { display: none; }
}
@media only screen and (max-width: 719px) {
	.mobile-menu #wrap-nav-topbar,
	.mobile-menu #wrap-nav-header,
	.mobile-menu #wrap-nav-subheader { display: none; } 
	#nav-mobile,
	#nav-topbar,
	#nav-header,
	#nav-subheader,
	#nav-footer { display: none; }
	.mobile #nav-mobile,
	.mobile #nav-topbar,
	.mobile #nav-header,
	.mobile #nav-subheader,
	.mobile #nav-footer { display: block; }
}

These:

#nav-mobile,
#nav-topbar,
#nav-header,
#nav-subheader,
#nav-footer { display: none; }

Should hide everything until the nav js loads.

It adds these when loaded:

.mobile #nav-mobile,
.mobile #nav-topbar,
.mobile #nav-header,
.mobile #nav-subheader,
.mobile #nav-footer { display: block; }

So I am really confused as to what is going on here. I need to look into this more and perhaps ask a friend what could be going on.

I see now when viewing your site that the nav appears broken for a short time on desktop screens as well when changing page. Not just mobile then. Investigating.

There is a lot of custom css running on the site – do you have any test site to try a clean version of Kontrast to see if you run into the same issues there? Just no plugins and no custom css, to pinpoint where the issue may come from.

Or, try this: https://demo.alx.media/kontrast/ – any issues there?

This is all my custom CSS from the child theme, which is related to the nav-bar:

#nav-topbar-nav.nav-menu:not(.mobile){
font-size: 16px;
font-weight: normal;
}

#wrap-nav-topbar {
    background: #fff;
    border-bottom: 2px solid #088198;
}

I can’t see how this would influence it.

Could it be cache related (WP-Rocket)?
It creates a separate mobile cache – see settings screen capture:
https://snipboard.io/8Egrhm.jpg

Sorry, I’m on terribly slow internet (E mobile) and I think the above screen shot didn’t finalise. The link below is okay, my WP-Rocket settings:
https://snipboard.io/2C5dEQ.jpg

When I test on GTMetrix I also receive a complaint about lay-out shift, which is related to the first few <div>. Screen capture:
https://snipboard.io/rKijfq.jpg

Hm, what happens if you disable WP Rocket just as a test?

Do you still have issues or were they resolved when you deactivated some plugin?

Sorry, Alexander @alxmedia

I’m currently in contact with WP-Rocket support but very seldomly online with my laptop, so things take much longer than they should.

Yes, WP-Rocket has confirmed that this is caused by deferring critical CSS and are trying to fix it for me. I just replied to them a few minutes ago (they needed login-credentials). Some things are just beyond my self-tought capabilities and current online time restraints.

I’ll let you know about the outcome.

Okay, fixed by WP-Rocket. They excluded the theme’s css from deferred loading.

Great to hear you fixed it.