Page Width Issues (cornerstone)

[Van_Biljon]

Hello Team

We are experiencing some strange page behaviour we can’t seem to fix. There are some pages (not all) that seem to be 50% page width when you are at the top of the page but once you move down it changes to 100% (full width) as intended.

We have deactivated each plugin one by one and found it to be the cornerstone that is causing the issues. I have checked all the setting but no luck in fixing it.

An example page that is affected by this can be found here:
https://www.runner.noble-pro.com/profile/jo-meek/

This issues started after updating the cornerstone plugin and X theme. The status is below:

WordPress Environment
Version 5.2.4
Active Theme
Name X – Child Theme
Version 7.0.4
Cornerstone Version 4.0.4

Please can you help me resolve the issue.

Regards,
Stefan

[friech]

Hi Stefan,

Thank you for writing in, please navigate to Theme Options > Header and set your Navbar Top Height to 72. Currently, the header is under height, resulting in that issue.

Cheers!

[Van_Biljon]

Hello Friech

Unfortunately this did not solve the issue. The header was set at 60 and not 160. I have taken a screenshot of the issue.

When right at the top of the page:

When moving down it does to full page:

[ruenel]

Hello Stefan,

I have checked the page and I found out that you are using Elementor in building the page. I would highly recommend that you contact the creators of Elementor. They can surely provide a fix or solution to your issue.

Thank you for your understanding.

[Van_Biljon]

Hello RueNel

I have disabled both Cornerstone and Elementor while testing which plugin is the issue. It was only Cornerstone that causes the issue.

Please can you provide support as all testing indicates it is relating to Cornerstone

[lely]

Hi Stefan,

Yes, the header is currently under height. 60 is to low for it. See this screencast showing the issue and possible fixed: https://screencast-o-matic.com/watch/cq6T6Eudud

Now, if you don’t intend to adjust height, a fixed is adding this custom CSS:

.page-id-3174 .x-main.full {
    clear: both;
}

Hope this helps.

[Van_Biljon]

Hello Lely

Thank you for the reply.

I have made the suggested changes however when I save and refresh the issue remains. See the inspection post making the changes. I am not looking to change the header as px in the long term as site needs to be the same as its sister site noble-pro.com. I have also added in the CSS and tested with no luck.

The CSS has been removed for now and but the 72px adjustment has been kept while the problem is being resolved.

See image below after the changes have been made which did not “stick” after refreshing with the new changes.

[Van_Biljon]

I have changed the the Navigation Position to Static Top which seems to have fixed the issue. Please can you advise if this will affect the website in any other way?

[ruenel]

Hello Stefan,

The Navbar Position when set to static, the navbar will hide away from the top of the page as you scroll down the page. The Fixed Top position makes the navbar stay on top of the page as you scroll down.

If you want to have a Fixed navbar on top of the page, please revert your navbar position settings so that we can find a work around to by pass Elementor’s grid settings from getting messed up.

Best Regards.