[Resolved] Different logos on different pages with sticky nav

[Martin]

Hi

Total novice here so I’ll apologise upfront.

I am trying to replicate and improve this site – https://dev-50310.co.uk, made with ark theme on https://dev-00135.co.uk/ using a combination of GP and Elementor.

I have managed to achieve the desired header/sticky effect I was after at https://dev-00135.co.uk/ but I have pages that require a different logo which changes to a different logo on scroll. Basically whats happening in the navigation area at https://dev-50310.co.uk/dream-team/ and it’s 4 sub pages.

Reading through previous posts has confused me so I thought it might be easier to ask you guys to at least point me to the definitive answer?

I am using svg logos as well, if that affects anything.

Many thanks

Martin

[Leo]

Hi there,

This should help:
https://docs.generatepress.com/article/navigation-as-a-header/#different-logo-and-navigation-colors

Let me know 🙂

[Martin]

Hi Leo

Thanks for quick reply.

I’m still missing something.

At https://dev-00135.co.uk/dream-team/, the logo reverts to the main logo on scroll.

These are the settings.

In addition, both images are visible in the mobile view.

I tried removing the site logo in the customizer and then I didn’t have a logo showing at all.

[Leo]

Sorry not sure if I’m following. On desktop, I thought you wanted the logo to change on scroll?

What is the problem currently?

The mobile issue is weird. I’ll take a look if I can replicate it on my install 🙂

[Leo]

Hmm can’t seem to replicate it on my install. The page hero one should replace the one in the customizer and not showing both.

So this logo is what you’ve uploaded in the customizer as the mobile header logo?
https://www.screencast.com/t/VWhHLJXJp
https://docs.generatepress.com/article/mobile-header/

Any caching plugins or server cache?

[Martin]

Hi Leo

Thanks for getting back.

Yes, on desktop I am trying to replicate this.

This appears to be working fine.

On the pages where I want a different logo to appear, I am trying to replicate this.

– this part is working.
– this isn’t working, on scroll the ‘Main’ logo displays.

Happy to let you have access to have a look at some point if that would be quicker.

Many thanks

Martin

[Leo]

Ahh ok. If you want the logo to stay consistent in static and sticky mode, then try this filter instead of using the page hero options:
https://docs.generatepress.com/article/generate_navigation_logo/

As for the mobile header logo, I believe it’s a bug.

The issue is solved if you choose Merge instead of Merge on desktop only right?

Let me know 🙂

[Martin]

Hi Leo

The issue is solved if you choose Merge instead of Merge on desktop only right?

Yes it does remove the extra logo but I had wanted to display the mobile as just the sticky with white background and coloured logo. If you’re saying that is not possible, no problem and I will go with that.

If you want the logo to stay consistent in static and sticky mode, then try this filter instead of using the page hero options

I wanted the logo to change from white initially and then change to the coloured logo on scroll – is that what you mean by consistent?

Many thanks

Martin

[Tom]

This sounds like a bug. I’ll take a look ASAP and will let you know 🙂

[Leo]

Different logo after scroll – this isn’t working, on scroll the ‘Main’ logo displays.

This is when the filter is needed to change the navigation logo for that page.

Let me know if you need help with the code.

We will take a look at the double mobile header logo bug 🙂

[Martin]

Hi

Thanks for looking into.

I would appreciate some help with the code Leo.

I have 5 pages that this affects. Could you provide a template for me to fill in the blanks. I assume I would change category to page id for the 5 pages, 4 are child pages.

Snippets plugin is installed and I assume I select run everywhere?

Many thanks

Martin

[Leo]

Try this:

add_filter( 'generate_navigation_logo','lh_category_navigation_logo' );
function lh_category_navigation_logo( $logo ) {
    
    // Return our category logo URL
    if ( is_page( array( 1, 2, 3, 4, 5 ) )  ) {
        return 'URL TO YOUR CATEGORY LOGO';
    }

    // Otherwise, return our default logo
    return $logo;
}

More info from here: https://codex.wordpress.org/Conditional_Tags#A_PAGE_Page

Let me know 🙂

[Martin]

Thanks Leo. Great for desktop but mobile still shows the incorrect logo on scroll.

Is there anything that can be done about that at the moment or is that due to the bug.

Thanks again, appreciate all your help.

Cheers

Martin

[Leo]

Ahh the sticky always handles differently.

Try this filter. The code should be very similar to above:
https://docs.generatepress.com/article/generate_mobile_header_logo/

Let me know if you need more info 🙂

[Tom]

I believe I have the mobile logo issue fixed. Feel free to shoot me an email and I’ll send the updated version to test before releasing 1.8: https://generatepress.com/contact

Thanks!

[Author]

Posts