[Resolved] My logo on the mobile version of my site looks funny

[Marcos]

Like its being forced to being narrower than what the actual image is. It looks ok on the desktop version.

Where can I control this? Thanks in advance.

[David]

Hi there,

this CSS is controlling the width of the site logo on desktop and mobile:

.site-logo {
    max-width:140px;
}

The mobile header uses the menu item height to size the logo and to keep it vertically centred, its the two together are causing the problem.

Try adding this:

#mobile-header>.inside-navigation {
    align-items: center;
}

.mobile-header-navigation .mobile-header-logo img {
    height: auto;
    padding: 0 !important;
}

I removed the padding as well to make it a little larger.

[Marcos]

Thanks for your reply. I’m sorry but, where should I add this code?

[Leo]

You can find the CSS David mentioned in the Additional CSS field in the customizer:
https://docs.generatepress.com/article/adding-css/#additional-css

[Marcos]

Thanks! That did the job

[David]

Glad we could be of help.

[Author]

Posts