[Resolved] Logo and menu loading problem

[Michalis]

Hi,

I have GP prenium and I’ve been trying to solve a problem that seems to appear only in chrome (and maybe in opera but I’m not sure).

Before any page is fully loaded, there’s a “jump/shift” between the logo an the menu bar. In more detail, the logo appears at on the left of the page before settling on the top (centre). This depends on the loading time but it’s definitely visible to visitors. It’s more prominent in the “Videos” page as it takes more time to load than the rest of the pages.

I’ve been trying to solve this issue for many days and it’s very frustrating as my knowledge is rather limited.

Any help would be much appreciated!

[Leo]

Hi there,

We can see the URL 🙂

Any chance you can disable all plugins except GP Premium to eliminate conflicts from other plugins first?

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Michalis]

Hi Leo,

Thank you for the prompt reply!

I deactivated all plugins except GP and the problem persists.

I’m using some CSS code in the “Additional CSS” editor in order to adjust the logo and the menu position. Do you think that the problem might be somewhere there?

/* —- Logo —-*/
/* Align the logo in the middle of the header */
.site-logo {
position: relative;
bottom: 17px;
margin-left: auto;
margin-right: auto;
}

/* ———————- MENU / NAVIGATION ———————-*/
/* Keeps menu bar in place!*/
#site-navigation.main-navigation.grid-container.grid-parent.stuckElement {
width: 100%;
}

/* Adjusts main’s navigation left and right position */

@media (min-width:1120px) {
body .inside-navigation.grid-container {
max-width: 86%;
}
}

/* Adjusts width of submenu */
.main-navigation ul ul {
width: auto;
white-space: nowrap;
}

Many thanks!

[Tom]

Hi there,

This seems to be happening because some of your CSS is loading in the footer (usually caused by critical CSS features).

In this case, CSS that’s critical for the header display is being loaded in the footer, which is incorrect.

If you disable critical CSS, the issue should go away.

Let us know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Michalis]

Thank you Tom,

Unfortunately I’m not sure how I can disable critical CSS. Am I correct to assume that critical CSS is caused by one of the plugins I use? If so, I did deactivate all the plugins except the GP premium (as per Leo’s suggestion) but the problem persisted so I’m a bit lost…

[Elvin]

Hi,

I’ve scanned through your site and as Tom mentioned, some of the critical CSS for your layout is indeed loading on the footer.

See here: https://share.getcloudapp.com/eDuPBlve

<link rel="stylesheet" id="so-css-generatepress-css" href="https://www.miad.eu/wp-content/cache/autoptimize/css/autoptimize_single_db038ab3dd7d7997cf167d46c491d7fe.css?ver=1602450410" media="all">

This right here is your issue. It loads on the footer of your site. Its a CSS cached by autoptimize.

That said, you may want to empty its cache or temporarily remove autoptimize and see if it makes things any better.

A wise man once said:
"Have you cleared your cache?"

[Michalis]

Thanks Elvin,

I deactivated Autoptimize and w3 total cache. I purged all files from cloudflare and I also activated the main GP prenium theme instead of the child theme (for some reason the logo disappeared but I’m not too concerned about that now since it will reappear when I activate back the child theme).

As you can see unfortunately the problem with the menu is still there…

Btw, thank you so much for your assistance and apologies for bombarding you with questions but it’s been very frustrating.

[Leo]

I just checked the site and it doesn’t look like All plugins are disabled.

I’m still seeing the file Elvin mentioned and it’s coming from Site Origin.

Can you disable that as well?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Michalis]

Hi Leo,

I disabled siteorigin and unfortunately nothing changed. After a lot of digging I tend to believe that the issue is on the css coded I’ve added to the website, although I really don’t know what could cause this.

I figured that using <body class=”preload”> in the wp_head (in the GP hooks) improves the behaviour although I now get a flashing kind of thing when the pages are loading.

Do you reckon that’s an acceptable workaround?

Ideally, I’d like to find the root of the problem but that’s well beyond my skills.

[Leo]

I just checked the site again with my browser cache cleared but still seeing some plugins enabled.

Can you disable them all for us to take a look?

I figured that using <body class=”preload”> in the wp_head (in the GP hooks) improves the behaviour although I now get a flashing kind of thing when the pages are loading.

Not sure what you meant by that. Can you undo that first?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Michalis]

OK I undid and deactivated the siteorigin. I also deactivated autoptimize.

[Leo]

I’m still seeing something weird here:
https://www.screencast.com/t/MGRdwJ7Qe

Any idea where that’s coming from? Is that the CSS you are referring to?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Michalis]

OK so I tried again to deactivate all the plugins except GP premium.

[Leo]

Very strange. Are you aware of any server related caching?

Also it doesn’t look like you are using the latest GP Premium version 1.12.2. Can you confirm?
https://docs.generatepress.com/article/generatepress-and-gp-premium/#gp-premium-%E2%80%93-premium-plugin

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Michalis]

I’m using cloudflare but I have purged all pages. My server is OVH and as far as I’m concerned there’s no caching but take this with a grain of salt.

Also, you’re right. It seems that I’m using GP Premium 1.11.3 but when I go to Dashboard -> updates there’s no option to update. All I get is the following:

“Plugins
Your plugins are all up to date.

Themes
Your themes are all up to date.”

I’m using a child theme though.

https://ibb.co/HNTfyPR

[Author]

Posts