[Resolved] Mobile Logo remove padding/margin and increase size

[Matthew]

Thanks for your great theme!
Here’s the site I’m working with:

http://greenplanet21.wpengine.com

ON mobile, the logo becomes too small and has either a margin or padding on the top, bottom and left.

I would like to lose the padding/margin and make the image a little larger.

I have looked into several posts here that looked like they may so;ve the problem but nothing worked.

I also looked via the browser inspector and tried a few changes, but they were with too much or had no effect.

Thanks for any help you can provide.

[Leo]

Hi Matthew,

I think you can try using the Mobile Header feature in Customizer > Layout > Header.
Once the feature is enable you can upload a Mobile Header Logo

Hope this helps!

[Matthew]

Thanks for your quick response.

I am using the Mobile Header feature in
Customizer > Layout > Header

Here are three screenshots showing how I have it configured and how the Customizer shows the logo in the three screen sizes:

http://greenplanet21.wpengine.com/genpresssupport/Screenshot 2016-11-30 23.24.26.png
http://greenplanet21.wpengine.com/genpresssupport/Screenshot 2016-11-30 23.25.05.png
http://greenplanet21.wpengine.com/genpresssupport/Screenshot 2016-11-30 23.25.09.png

For the Desktop version, it looks fine. But the mobile version has whitespace above, below and to the left. I want to have the logo flush against to places with no whitespace.

I would also like to make the logo a little larger on tablet and phone. It may be that removing the whitespace would allow the logo to be larger.

In any case, I am unable to determine the correct css to get this accomplished. As you can see in the pictures, I have the logo paddings all set to zero, so the Customizer isn’t achieving this for me. I can find no other place in the customer that would affect this.

Please advise.

Thanks.

[Matthew]

My links didn’t translate rproperly.

here they are :

http://greenplanet21.wpengine.com/genpresssupport/Screenshot_2016-11-30_23-24-26.png
http://greenplanet21.wpengine.com/genpresssupport/Screenshot_2016-11-30_23-24-05.png
http://greenplanet21.wpengine.com/genpresssupport/Screenshot_2016-11-30_23-24-09.png

[Tom]

You could do something like this:

.mobile-header-navigation .mobile-header-logo {
    padding-top: 0;
    margin-left: 0;
}

.mobile-header-navigation .mobile-header-logo, 
.mobile-header-navigation .mobile-header-logo img {
    height: 50px; /* height of your navigation */
}

[Matthew]

Thanks!

I had to add !important to the rules for them to take effect.

I had actually tried something similar before. but this is well targeted and does the trick.

Thanks again! I’m so grateful for the excellent support you offer.

[Tom]

Awesome! No problem – happy to help 🙂

[Author]

Posts