Topic: How to make logo show in mobile header?

InspiredAssistance
April 2, 2026 at 4:46 am

How can I make it so my logo shows up on mobile as well as desktop in the header of my site? Right now it only shows up on desktop. I’ve tried editing it in Customizer under Site Identity to be a smaller size but it still doesn’t show. Thanks!

https://i.postimg.cc/pVSvDhRG/Screenshot-2026-04-02-at-8-46-04-AM.jpg

https://i.postimg.cc/bwxjcmks/Screenshot-2026-04-02-at-8-46-10-AM.jpg
George
April 2, 2026 at 6:34 am

Hello,

Is it possible to send us a URL?
InspiredAssistance
April 2, 2026 at 9:06 am

Yes – here you go!

inspiredbackpacker.com
George
April 2, 2026 at 9:14 am

Hello,

Please, try Customizer -> Layout -> Header -> Mobile Header, set Branding Type to Logo and upload your logo.
InspiredAssistance
April 2, 2026 at 10:56 am

Great, thanks. That helped but now the logo is super tiny on mobile and when I created a larger file size and tried to add that, it didn’t help. Is there anything I can do to make it larger? I’d like it maybe half the size as the backpack

inspiredbackpacker.com

https://i.postimg.cc/yxLLDFPC/IMG-7557.png
George
April 2, 2026 at 11:24 am

What happens if you disable the mobile header altogether? Set Mobile Header to Off.
InspiredAssistance
April 2, 2026 at 1:55 pm

That doesn’t work because then the title is cut off – see screenshot:

https://i.postimg.cc/tCxLSg9p/IMG-7558.png

Alvind

April 2, 2026 at 3:34 pm

Hi there,

Try adding this CSS:

@media(max-width: 768px) {
    .site-branding-container .site-logo img {
        height: auto;
        width: 80px;
    }

    .site-branding-container .site-branding {
        max-width: 150px;
    }

    .site-branding-container .site-branding p {
        font-size: 16px;
    }

    p:empty {
        margin-bottom: 0;
    }
}

InspiredAssistance
April 3, 2026 at 5:41 am

This is perfect, thank you!
Alvind
April 4, 2026 at 2:42 am

You’re welcome!

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

You must be logged in to reply to this topic.