[Resolved] Site Logo Disappears when Scrolling down

[Jatin]

Hi Guys,

My Site Logo on the Navigation Header while scrolling down the page disappears. Is there any way to make it sticky.
https://imgur.com/PRobr2G

[David]

Hi there,

go to Customizer > Layout > Sticky Navigation and make sure you have set a Logo there.

[Jatin]

Hi David, I have set the logo now and its switch ON. Does it take time. its still the same. Its fine on the Mobile but not on the Desktop. Site Link in Info box

[Leo]

What is the sticky navigation menu item height in the customizer set at?
https://docs.generatepress.com/article/sticky-navigation/#menu-item-height

[Jatin]

got it. Thanks.

[Jatin]

Hi Leo,

On the Mobile Phone, When i scroll down the page the site logo appears fine on the Navigation Header but the same size one as the main header. I want to show a slightly smaller site logo on the Mobile Phone when scrolling down the page. its fine on the desktop.

[Leo]

The logo you see on mobile is actually the mobile header logo:
https://docs.generatepress.com/article/mobile-header/

Can you try uploading a smaller one there?

I think it would look slick if you just use the icon 🙂

[Jatin]

I changed it now it looks good. But i want to have a normal one on the mobile site and when i scroll down then just an icon as you said.

[Leo]

That’s actually quite complicated and would require steps like this:
https://generatepress.com/forums/topic/show-different-navigation-logo-for-mobile-sticky-menu/#post-621226

[Jatin]

Works fine. Thanks.

[Jatin]

Hi Leo, The Logo I updated as per code is not clickable ?

[Leo]

Any chance you can link us to the site in question?

You can use the private information field.

Let me know 🙂

[Jatin]

Site link

[Leo]

Ahh the anchors are missing.

Try this instead:

add_action( 'generate_inside_mobile_header','lh_mobile_logos' );
function lh_mobile_logos() {
?>
    <div class="site-logo mobile-header-logo">
        <a href="https://SITE-URL" title="SITE TITLE" rel="home">			
            <img src="URL TO MOBILE HEADER LOGO" alt="" />
        </a>
    </div>
    <div class="site-logo mobile-header-logo sticky-only">
        <a href="https://SITE-URL" title="SITE TITLE" rel="home">	
            <img src="URL TO STICKY MOBILE HEADER LOGO" alt="" />
        </a>
    </div>
<?php
}

[Author]

Posts