This has been covered before on https://forum.getpublii.com/topic/mercury-theme-logo-placement-broken-for-mobile-phones/ and here is another solution.
The problem is that the hamburger menu pushes over the logo by 24px so adding a media query for sub 900px to adjust the margin on the logo fixes it. eg
@media screen and (max-width: 899px) {
.logo img {
margin-left: -24px;
}
}
Slightly different to the other but works for me.
