As I recall, the color sections seem to be the magic element that restores order to the page. Whether it’s adding elements within the color section or placing an empty color section above the broken elements.

I know that your team is not willing to access the site but if you choose to you can do a diff on the source code between the setting on and off. However, if you do, we ask that it be enabled for only a few brief moments.

I also have not found this to resolve the socket background color issue previously mentioned.

Hi Yigit,

Respectfully I’m not sure that spending hours upon hours on our end to put the site on a publicly available domain makes sense in order to save your team 60 seconds.

FWIW here are some of our observations:

What we’ve found so far is that the fractional Layout Elements such as 1/1, 1/2, 1/3 etc have begun rendering full browser width rather than remaining within the 980 page width that is set.

Part of the issue is LayerSlider. When we remove layerslider from the top of the page the upper section of the page renders correctly. When we leave it in place and add an empty Color Section below it it also renders correctly. It also works if the elements are dropped into a color section. The lower section, after some of the elements that are rendering correctly, is also broken in most cases. When we add another Color Section below the correctly rendering sections and above the broken section, the lower portion of the page renders correctly.

Another issue is that the “Socket background color” in General styling is also altering the body background color, not just the socket. When we change the socket background setting to #fff and add a #socket property with #333 in CSS the page(s) render as it should with a white body and a #333 socket. Previously we had the socket set at #333 and after the update some pages rendered with 333 background.

In console we see a number of “Unmatched end tags” also.

After looking again I see that the server has mod pagespeed installed. I think that is the issue. I’ll check with the host. Thanks.

Great. Thank you. Sorry too for the slow response.

Here’s what I used:

nav.main_menu {
top: 46px;
}

ul.children {
top: 117px;
}

And when the heading shrinks when scrolling:

.header-scrolled nav.main_menu {
top: 46px;
}

.header-scrolled ul.children {
top: 117px;
}

Perfect. Thank you!