[Resolved] Logo for mobile version

[Leo]

Thanks to you guys the mobile version of my website now looks fine, too!

There is just one little thing I would like to change just for the mobile version (and then everything will be perfect): the logo should move slightly to the right to adjust with the header and the rest of the text. I have looked under Layout > Customise > Primary Navigation, but it appears that I can only change the height there, but not the position. It will probably need some CSS, which I am hopeless at.

Many thanks for giving me a hint!

[Leo]

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 🙂

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

[Leo]

Thank you, Leo, that did the trick!

Kind regards,

Leo

[Leo]

No problem 🙂

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

[Leo]

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

[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.

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

[Leo]

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

[Fernando]

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.

[Leo]

Hi Fernando,

Thank you so much!

Regards,

Leo

[Fernando]

You’re welcome Leo!

[Author]

Posts