Header logo in not centered anymore

Using the theme with the “modern” style I get the same issue (centered webtitle moving left) on screen sizes above 960px. Additionally the mobile menu becomes unresponsive above 960px.

The issue remains after clearing cache and deactivating all plugins temporarily.
The Problem doesn’t show up anymore, if I downgrade to Go Theme 1.4.4.

Hi! Thanks for reporting this. We are actively looking into it. We introduce a new feature in the latest version of Go that gives the power to people to hide their site title or site tagline without doing custom CSS as it was required before. It is possible that what you are experiencing is the result of that change. Make sure if you were using that feature to go into the Customizer -> Site Identity and check either “Hide Site Title” or “Hide Tagline”.

Hi Jonathan, thank you for the heads up. Just wanted to confirm the issue: I switched to version 1.5 and double checked that both, Hide Site Title and Hide Tagline were activated, but to no avail. The navigation isn’t affected either, ie. doesn’t work on larger screens.

Hi, thanks for your patience on this one. I tracked it down to a couple of issues in the following PR. This will come as a fix to version 1.5.0 as soon as we get that reviewed and tested. https://github.com/godaddy-wordpress/go/pull/715

I just upated to version 1.5.1 and the issues with not centered website logo and unresponsive mobile menu are both solved. Thank you for the fast solution.

Since I’m not the initiator of the thread, I don’t want to jump ahead of @jonasschoen and mark the thread as solved. A final feedback from Jonas would be very welcome.

Hi @jonathanbardo and team,

thank you for fixing this issue so fast. Thanks to @pixolin for your help as well. Version 1.5.1 fixes the problem for me as well.

Greetings,
Jonas

I just updated to 1.5.1 today and am still experiencing this issue. I have tried several browsers (with no cache). The header appears to be shifted left in both the desktop and mobile versions. I am not using any WP caching plugins that I’m aware of. Any ideas?

Did you clear your browser cache after the update?

Yes. I also pulled up the site in a couple of browsers I don’t normally use (Firefox and Edge), cleared cache, and opened the site. Same result. The only thing I can think of is maybe I’m using a plugin that does site caching that I’m not aware of? I use the free version of JetPack, but it looks like the “performance” features don’t unluck unless I’m subscribed. Is it possible host site caching could be causing this? Maybe I just need to wait awhile?

It happens rather rarely that websites heal themselves. ??

You could give the plugin Health Check a try. It provides you with a troubleshooting mode, where all plugins get temporarily deactivated and a default theme activated. Of course you want to activate the Go-theme then from the admin bar. But you can easily check, if the issue remains if all plugins aren’t running. After the test you simply deactivate the troubleshooting mode via the admin bar and delete the plugin. Your website visitors won’t see any changes during the process.

I used the Health Check plugin and troubleshooting mode, enabling only the Go theme as you suggested, and the issue remains.

Any other ideas? Site is whiskandshell.com. I’m using the header option that has search on the left, logo centered, and nav below logo (third option). If you inspect the header in Chrome you can see that the search icon seems to be shifted left, which drags everything else along with it. It’s easiest to see with a narrow window.

Can you try to add this in the Customizer in “Additional CSS”:

@media only screen and (max-width: 599px) {
.woocommerce-js .header__extras, .woocommerce-js .header__nav-toggle {
    flex: 0 0 0;
}

Getting better! That looks like it takes care of things on mobile screens, but the logo is still shifted left on desktop. I tried removing the “@media only screen and (max-width: 599px) {}” portion, but it did not appear to correct the desktop version.

I’m using the following code in the Additional CSS section now, and everything works correctly up to 960px page width. I can’t figure out how to make it work correctly above 960px.

@media only screen and (max-width: 599px) {
.woocommerce-js .header__extras, .woocommerce-js .header__nav-toggle {
    flex: 0 0 0;
}
}

@media only screen and (max-width: 781px) {
.woocommerce-js .header__extras, .woocommerce-js .header__nav-toggle {
    flex: 0 0 0;
}
}

@media only screen and (max-width: 960px) {
.woocommerce-js .header__extras, .woocommerce-js .header__nav-toggle {
    flex: 0 0 0;
}
}