[Resolved] Sticky nav not switching to navigation logo, uses custom page header logo

[Ria]

I’ve made a custom header for the home page of this site and configured the Logo tab “Overwrite your navigation logo on this page.” to a green version of the logo.

So that it will look like this in the header:

And in the Customizer I’ve set the (static + sticky) Navigation logo to a white version of the logo

But when scroll down any page, the logo in the sticky nav is still the green one instead of white. For some reason, the sticky nav is pulling in the green logo image that’s supposed to be used only for the (non-scrolled) home page custom page header, instead of the white logo I configured for the stick nav logo.

The ONLY place I’ve configured to use the green logo is the home page custom page header. The mobile and sticky nav logos are both configured to use the white logo. The mobile nav logo comes up white. It’s only on the desktop sticky nav that the wrong (green) logo shows.

WP 4.9
GP Premium 1.5.4

(Yes, cleared cache. Yes, disabled plugins)

[Tom]

Strange, that doesn’t sound right. Is there any chance you can link me to the problem page so I can take a closer look?

[Ria]

Hi Tom,

Sorry for the delayed reply – I was out for the Thanksgiving holiday. I’d be glad to link you – but at this point, the site is still in early development on my local server. However if need be, I can throw it up on a demo server so you can see it.

[Leo]

If you can do that it would be great! Thanks!

[Ria]

Ok, done. Site on demo server here.

Thanks!

[Tom]

Ahh I see – the navigation logo is just one logo, there’s no separate option for the sticky navigation.

However, you can do this:

add_action( 'generate_inside_navigation', 'tu_sticky_nav_logo' );
function tu_sticky_nav_logo() {
    ?>
    <div class="site-logo sticky-logo navigation-logo sticky-navigation-logo">
       <img class="header-image" src="URL TO YOUR STICKY LOGO" alt="">
    </div>
    <?php
}

Then add this CSS:

.main-navigation .navigation-logo.sticky-navigation-logo,
.main-navigation.navigation-stick .navigation-logo {
    display: none;
}

.main-navigation.navigation-stick .navigation-logo.sticky-navigation-logo {
    display: block;
}

[Ria]

Hi Tom,

Thanks, I’ll give this a try. But…shouldn’t this work within the theme Customizer (as shown in the screenshots), rather than have to add this code?

[Ria]

Ok, I implemented the codes you suggested, and the result is that the green logo no longer shows in the home page header when you’re at the top of the home page – and on scroll-down, both the green and the white logos show in the nav menu logo area:

On internal pages, no logo when you’re at the top of the page, and two white logos when you scroll down.

You can see this on http://riademo.com/

Let me know if you’d like to log in to the back end of the demo site to see the way it’s configured.

[Tom]

It doesn’t work using the options as there’s no sticky-specific navigation logo option. There’s only the one navigation logo option, which applies to sticky and non-sticky navigations.

I just replaced all of the code above – can you replace each part of it and see if it works now?

Let me know 🙂

[Ria]

That new code did the trick. Thanks, Tom!

[Tom]

You’re welcome 🙂

[Author]

Posts