[Resolved] Is there a way to choose a different site logo for mobile?

[Nicole]

The site logo I have for desktop and tablet works great, but I need to use a cropped version of that photo, for the mobile site logo. In other words, I need to use a different photo for the mobile site logo. Is there some way to do that?

[Tom]

Hi there,

Have you tried the Mobile Header option?: https://docs.generatepress.com/article/mobile-header/

[Nicole]

I want to use a cropped version of the desktop/tablet header (a separate image), exclusively for mobile. It would be a whole separate image. I want it to appear below the primary nav bar, just like it does for desktop and tablet view.

I have tried the mobile header option, but it is my understanding that the mobile header option ONLY lets me put the image inside the primary nav bar, and that’s not where I want it.

[Leo]

Try this:

1. Create a new hook element:
https://docs.generatepress.com/article/hooks-element-overview/

2. Copy and paste the HTML below as content and replace https://HOME-PAGE-URL/ and https://MOBILE-LOGO-URL-HERE with the actual URLs

<div class="site-logo mobile-site-logo hide-on-desktop hide-on-tablet">
    <a href="https://HOME-PAGE-URL/" title="Nicole Fraser Virtual Assistant" rel="home">
        <img class="header-image" alt="Nicole Fraser Virtual Assistant" src="https://MOBILE-LOGO-URL-HERE" title="Nicole Fraser Virtual Assistant">
    </a>
</div>

3. Select after_logo in the Hook dropdown list.

4. Under Display Rules, select Entire Site as Location.

5. Add this CSS to hide the desktop logo:

@media (max-width: 768px) {
    .site-logo:not(.mobile-site-logo) {
        display: none;
    }
}

Let me know 🙂

[Nicole]

Sorry for the delayed response. I’ve been really busy. Your setup above worked like a charm! Nice work! Thank you so much!

[Leo]

No problem 🙂

[Author]

Posts