Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].
Hi,
This is my first WordPress website, so please excuse my ignorance.
When the page is resized on a small screen (I’m testing on an iPhone 4s), my header/masthead logo “overlaps”
my menu button (I’ve used the “Responsive Menu” plugin, rightly or wrongly, because it gives me the options I want). If I resize the window on my desktop, the logo stays aligned to the left UNTIL a certain point, then “centres” itself. Strangely, the horizontal height of the header also increases.
Is the CSS I can inject to keep the logo LEFT aligned even on a vey small screen?
The site I’m working on is: www.oceanshoresadventist.org.au
Thanks in advance for any advice!
Hi AndrewGozza
Thanks for reaching out. Did you manage to resolve. All looks good on my side, testing in iOS Chrome.
Thanks Andrew, It is sort of fixed…. I re-did the logo with blank space to the right of the logo, so that the logo always “looks” aligned left. The logo now does not obscure the menu button on a small screen (<640px).
Is there any code to center the logo vertically?
Perhaps try the following, see if that helps at all:
/* Header */ @media (max-width: 680px) { header#masthead .hgroup { padding-bottom: 0; } body.responsive header#masthead .hgroup .logo { padding-top: 13px; } }Insert under Appearance > Custom CSS.
Thanks for the CSS you suggested: Worked well UNTIL the theme was upgraded today…
Now the header DOUBLES in vertical height when the browser window is reduced to mobile screen width.
Any ideas? (Have screen shots, but not sure if/how to upload them)
Try changing our Custom CSS to the following:
/* Header */ @media (max-width: 680px) { header#masthead .hgroup { padding-top: 0; padding-bottom: 0; } body.responsive header#masthead .hgroup .logo { padding-top: 13px; } }Thanks for the CSS you suggested: Worked perfectly!
Super, glad that did the trick :) All the best.
Andrew,
on the same issue, is there a way of making the logo in the header align “hard” LEFT? Currently, the logo position looks fine on iOS (small screen), but the logo is “centering” and overlapping in Windows Mobile.
At the moment, the logo is left aligned, but left aligned with the content on the page content.
IF the logo could be aligned left , it might fi my problem…
Sure, you could try to switch out the CSS we used before with the following:
/* Header */ @media (max-width: 680px) { header#masthead { padding-left: 0; } header#masthead .hgroup { padding-top: 0; padding-bottom: 0; } body.responsive header#masthead .hgroup .logo { padding-top: 13px; } }Give that a try, let us know how it goes.
Hi Andrew, That *sort of* helped… The header logo is a little more left now, but with “padding-left: 0” I would have thought that the logo would move to the left side of the screen, and I’d have to add padding to make it look nice…
Looks solid on my side. Let me know if you’d like to make further changes.