Button in Masthead changes position on different pages

Sorry, I tried to put 2 web pages in the web information box which didn’t work.
Example pages are:

https://essexfreemasons.org.uk/

https://essexfreemasons.org.uk/where-we-meet/

Hi Lawrie

If the pages in question are using Page Builder you might consider changing the Page Layout in Page Settings back to No Sidebar or Default and make use of the row full width stretched option.

Alternatively, you can force the header to be normally contained by adding to Custom CSS:

.site-header .full-container {
	max-width: 1080px !important;
}

If you’d like that rule to be specific to a page, you can prefix it with the page ID as per https://siteorigin.com/unique-page-styling-custom-css-body-classes/.

There isn’t a specific button height setting but you could adjust the padding setting in the button widget.

Thanks Andrew but that didn’t work too well.
I have sorted the desktop layout by adding
/* Vantage Full Width Layout – Adjust Site Width */
body.responsive.layout-full #page-wrapper .full-container {
max-width: 1800px;
}
and then adjusting the page content area size to 70% with another 15% widget each side to bring the front end page view back to normal.
However, the button on a mobile is not good. I have checked the ‘No Widgets Overlay’ box in customise/theme settings/logo because the button was overlapping the logo but the button doesn’t seem responsive on my iPhone. It appears as a large button above the menu.
I have turned the password off if you could please check it out.
Thank you

Thanks for the feedback.

It’s expected that the button will collapse below the logo for mobile. I think the padding above and below the header widget area on mobile might be set to 0 by Custom CSS but can’t tell for sure with caching/aggregation enabled so you could check the Custom CSS if you’d like to adjust padding below the button.

If you turn off caching/aggregation I can try to see why the button is full-width.

Thank you Andrew.
I have deactivated Autoptimize and WP Fastest cache. Is that sufficient to allow you to check the issue?

Thanks. If you edit the button and change the alignment to anything except for Justify, the full-width button issue should be resolved.

Header Padding is set to 0 at Theme Design > General which is why there isn’t space above or below the button. To compensate, you can try adding:

@media (max-width: 768px)
	#masthead .full-container {
		padding-bottom: 30px;
	}
}

Adjust as required.

Thanks.

pro-tip for future reference: you can disable Autoptimize on a per-request basis by adding ?ao_noptimize=1 to the URL.

if the problem is not there at that point, some autoptimize (re-)configuration might be needed to fix this. there are troubleshooting tips and info on how to exclude in the AO FAQ.

hope this helps debugging,
frank (ao dev)

Thanks Andrew
Changing the button alignment fixed the size issue but

@media (max-width: 768px)
#masthead .full-container {
padding-bottom: 30px;
}

didn’t work for me.

Also, is there a reason why the button randomly jumps before settling in its correct position when switching tabs. This doesn’t happen every time a tab is selected but often enough to be annoying.

Thanks. Please, update the CSS rule to:

@media (max-width: 768px) {
	#masthead .full-container {
		padding-bottom: 30px;
	}
}

The header centering as it stands is done using JavaScript, there is a delay in applying that causing the jump.

Thank you. I really appreciate your support.
The mobile button position is perfect now.

Super, I’m glad to hear you’re making progress.

This might help with the jump:

@media (min-width: 1473px) {
	#masthead .hgroup #header-sidebar[style] {
		padding-top: 74px !important;
		padding-bottom: 74px !important;
	}
}

Thanks again for trying Andrew but the button is still jumping.

You can try inserting the rule at Customize > Additional CSS to get it a little higher up the page load order.

That didn’t seem to make any difference. Still randomly jumping.