[Resolved] Logo on smaller mobile overtop text from merged header element, menu background

[John MacKenzie]

ive got smartslider element set in a header and it has text in it. When i make the site smaller as if on mobile, the logo ends up overtop of the text. Is there a way to reduce the size of logo on mobile, so it doesnt overlap the text

i tried setting mobile header but no login shows up when I set it there.

[Leo]

Hi there,

The mobile header option should work.

Can you try activating it again and set the menu item height to 65px with the mobile toggle activated?
https://docs.generatepress.com/article/menu-item-height-width/#height

Let me know if this helps 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[John MacKenzie]

thanks thats great!

how do we make the logo look better it looks like its just sort of stretched smaller and not very clear? ( I notice this on the sticky menu too?

thanks

[John MacKenzie]

also the opaque background disappears that i have on the main menu so how do I set that

and the drop down menu formatting looks odd now there is no background colour.

thanks

[Leo]

Let’s try to tackle one issue at a time.

how do we make the logo look better it looks like its just sort of stretched smaller and not very clear? ( I notice this on the sticky menu too?

Have you tried increasing the menu item height some more?

Alternatively, you can take a look at the suggestions here as well:
https://docs.generatepress.com/article/mobile-header/#branding-type

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[John MacKenzie]

Ok i guess thats better on the logo, let me know on the other items thanks!

John

[Leo]

Any chance you can open a new topic for each of your questions?

I’ll mark this one related to the logo as resolved.

Thanks!

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[John MacKenzie]

well its really more about the header not just the logo, these items are related imo so adjusted the title if thats ok. thanks!

[David]

Hi there,

try this CSS:

#mobile-header .site-logo.mobile-header-logo img {
    height: 50px;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts