ILLUMINICE

[ILLUMINICE]

Hi Abe,

I just checked the loading order of the child theme css file, and it is being loaded last like you said. The only non-standard thing I did with the child theme was to change it’s name (the child theme folder name). But I made sure that style.css was correctly pointing to the child-theme folder. I haven’t had any issues with the child-theme at all, other than this strange delay.

This delay issue is a very serious problem. The more custom css work I do, the more pronounced and widespread this problem becomes. Literally everywhere I have custom css (especially hiding elements or moving them), you can see those changes kick in late, about a second after the page loads. I’ve never seen anything like it before on any other site I’ve built.

The css file of the child theme isn’t large (yet). I think I’m at about 1,300 lines. But I’ve had child theme css files as high as 7,000 lines without seeing this problem. There’s something else causing this. I’ve tried many things here to find the problem with no success. Have you seen this with other implementations of Kleo?

Here’s a test you can do on your end to replicate this…

Set the header to the style with the logo in the middle of the two menus. So there’s a primary and secondary menu. Then set the menus to be wider apart from the logo with this custom css in the child theme:

COPY CODE

@media only screen and (min-width: 991px) {
	div#header div.navbar div.sticky-wrapper div.kleo-main-header.header-split div.container div.navbar-header {
		flex-grow: 1 !important;
		flex-shrink: 1 !important;
		flex-basis: 70% !important;
	}
}

All you then need to do is see of the menus shift outward when loading the page. You would see them close to the logo first, and then shift outwards as the custom css kicks in. That’s exactly what is happening here. This kind of problem is happening everywhere I have custom css.

….

Regarding disabling the side menu / mobile header on specific pages:

Thank you for helping with this. You can understand why I’m trying to avoid more css overrides, considering the problem above. What I am trying to do is maintain the standard header on my entry pages (like login/register). In other words, I don’t want the side-menu button to appear, or the logo to shift to the left, and all the responsive changes that are occurring related to this.

If you’re wondering, I am only displaying our logo on our login/register page in the header. I managed to hide the primary/secondary menus without using css overrides (because of the above problem). What I did for that was create a WordPress menu with nothing in it, and then assigned it to that page. It worked very nicely. But I still need to prevent the mobile header features from occurring on those pages.

I hope that clears it up for you…

Thank you for all your help!

~ Michael

[Author]

Posts