Mobile logo best practice

[Charles]

I’m trying to add a mobile logo to this site fieldstonefamily.ca – but the logo is illegible. I have tried to lookup optimum logo size but it appears there are conflicting css fixes depending on the particular site.

What is the recommended size for a logo in the mobile navigation bar?
What is the recommended size for a mobile header and how do I put the logo in the mobile site’s header section instead of on the navigation bar?

Thanks
Charles

[Leo]

Hi there,

There isn’t a recommended size as it’s all personal preference.

Try increasing the menu item height with the mobile toggle to increase the logo size:
https://docs.generatepress.com/article/menu-item-height-width/

If you want the logo to be above the mobile navigation, then turn off the mobile header option.

You can see the differences here:
https://docs.generatepress.com/article/mobile-header/

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

[Charles]

Thanks, but if I turn off the mobile header option, how do I use a different image for the mobile header and keep it above the navigation? Does that have to be done using a CSS @media selector?

Charles

[Leo]

Yeah you will need this solution here:
https://generatepress.com/forums/topic/top-of-mobile-header-not-visible/#post-1080672

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

[Charles]

Turning off the mobile image puts the desktop image in as default and that CSS doesn’t replace it. Do I have to move the original image off stage?

[Leo]

Not quite sure if I understand the issue.

Can you implement the method above so I can see what’s going on?

Let me know 🙂

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

[Charles]

I’ve turned off mobile image in the customizer as directed. If you check the site on mobile it is automatically using the same header image (above the menu) as desktop. I want a different image on the mobile version. In mobile only, how do I remove the desktop image and use my custom mobile image as a header graphic above the menu bar? I hope that explains it.

[Leo]

To use different logo images for desktop and mobile, you would need every step as I detailed in this post:
https://generatepress.com/forums/topic/top-of-mobile-header-not-visible/#post-1080672

I currently don’t see the method implemented at all, can you make sure that every step is done?

Let me know if any of the steps are unclear.

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

[Author]

Posts