Premium support

Please log in to post in these forums. If you didn't create an account when you purchased, please contact us.

Free support

If you haven't purchased GP Premium, support for the free theme can be found on WordPress.org.

[Resolved] Logo too large in mobile and tablet view

Home Forums Support Logo too large in mobile and tablet view

This topic contains 7 replies, has 2 voices, and was last updated by  Leo 3 months, 1 week ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #470542

    Hi, my logo image shows up fine in desktop view, but in mobile and tablet views, it takes up the entire width of the screens and pushes the mobile navigation menu and search icon down into a second row. For mobile and tablet views, how can I get my logo positioned on the left side and the mobile nav menu and search icon positioned on the right in one row?

    Any advice is appreciated.

    GeneratePress 2.0.1
    GP Premium 1.5.6
    #470715

    Leo
    Staff

    Hi there,

    Try our mobile header feature: https://docs.generatepress.com/article/mobile-header/

    The mobile header logo is supposed to be small square-ish icon so we might need some extra CSS to make it look good 🙂

    Want to help support GP? Please consider leaving us a review!
    https://wordpress.org/support/theme/generatepress/reviews

    #470723

    Thanks Leo! I enabled the mobile header and uploaded a small mobile header logo that’s 165 x 13 px, and like you predicted, it looks a little wonky. Any advice on how I can style it so it’s crisp-looking like the desktop logo?

    #470731

    Leo
    Staff

    Hmm I still see a image of width 274px being uploaded?

    Want to help support GP? Please consider leaving us a review!
    https://wordpress.org/support/theme/generatepress/reviews

    #470756

    I just resized, renamed, and reuploaded the mobile logo. It’s 150x12px now, but in the mobile preview, it still looks all stretched out and blurry–though a little better than before.

    Any ideas?

    #470887

    Leo
    Staff

    Try this CSS:

    @media (max-width: 768px) {
        .mobile-header-navigation .site-logo.mobile-header-logo img {
            height: auto;
        }
    }

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

    Want to help support GP? Please consider leaving us a review!
    https://wordpress.org/support/theme/generatepress/reviews

    #470984

    Leo, that worked great! Thank you so much for your help–and on a Sunday. You and Tom are so helpful every step of the way. 🙂

    #471030

    Leo
    Staff

    Glad we’ve been helpful 🙂

    Want to help support GP? Please consider leaving us a review!
    https://wordpress.org/support/theme/generatepress/reviews

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.