Logo for mobile version

Hi there,

Try this CSS:

.site-logo.mobile-header-logo {
    margin-left: 30px;
}

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

Let me know if this helps :)

Thank you, Leo, that did the trick!

Kind regards,

Leo

No problem :)

Hi Leo,

I still have an additional question: I made the logo for the mobile version somewhat bigger (Customise > Layout > Primary Navigation > Menu Item Height), so that the proportions look better. I just saw that, as a result, the distance between the different items of the popup menu have become bigger accordingly. So, the bigger the logo, the bigger the distance between these items. Is there a way to avoid this? I would just want to have a larger logo and to keep the popup menu as it was before.

Again, thank you for your great support!

Regards,

Leo

Are you referring to the logo in the mobile header or the one in the off canvas menu?

My honest opinion here is that the header on mobile takes up way too much of the space:
https://www.screencast.com/t/fi1X4OrzKEWF

That's almost half of the phone screen.

Dear Leo,

Thank you for your quick reply. I indeed meant the logo in the mobile header. When I make it larger the distances between the various entries in the off canvas menu automatically increase proportionally, which is what I wanted to avoid.

You are probably right in saying that the header in the mobile version takes up a lot of space: this is because i wanted to have the logo stand out more (so as to improve the readability of the website address it contains).

I have followed your advice and have reduced the size of the logo (at the cost of its readability). But just in case: would it indeed be possible to change the size of the logo in the mobile header without it having an effect on the layout of the off canvas menu?

Thanks a lot.

Regards,

Leo

Hi Leo,

It’s possible. Here’s a CSS you may try:

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

#mobile-header .site-logo.mobile-header-logo {
    height: fit-content;
}

Replace 200px with your preferred value.

Hi Fernando,

Thank you so much!

Regards,

Leo

You’re welcome Leo!