[Support request] Change Logo media source file when sticky

[Marie Odile]

Hi,
I was wondering if it’s possible to change the image source file for the sticky menu. It looks by default it’s always the same image for the logo on the main navigation and on the sticky navigation.
Thanks,
Jesus

[Tom]

The navigation logo/sticky navigation logo are the same image I’m afraid.

I’ll definitely put some thought into this though, might be able to come up with something 🙂

[Marie Odile]

Thanks!
IF you have any idea on how to achieve it via hooks or similar let me know.
Jesus

[Tom]

You could do something using hooks..

add_action( 'generate_inside_navigation','tu_navigation_logos' );
function tu_navigation_logos() {
?>
    <div class="sticky-logo navigation-logo">
        <img src="URL TO NAVIGATION LOGO" alt="" />
    </div>
    <div class="sticky-logo navigation-logo sticky-only">
        <img src="URL TO STICKY NAVIGATION LOGO" alt="" />
    </div>
<?php
}

Then some CSS:

.navigation-logo.sticky-only {
    display: none;
}

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

.navigation-stick .navigation-logo:not(.sticky-only) {
    display: none;
}

Something like that should work.

[mike]

Hello guys,

How can i use this on the homepage only?

Thanks

[Leo]

Is your home page a static home page or a blog page?

[mike]

Static

[Leo]

Try this for the snippet:

add_action( 'generate_inside_navigation','tu_navigation_logos' );
function tu_navigation_logos() {
?>
    <?php if ( is_home() ) : ?>
        <div class="sticky-logo navigation-logo">
            <img src="URL TO NAVIGATION LOGO" alt="" />
        </div>
        <div class="sticky-logo navigation-logo sticky-only">
            <img src="URL TO STICKY NAVIGATION LOGO" alt="" />
        </div>
    <?php endif; ?>
<?php
}

[mike]

Hey,

The regular snippet works fine, this made the logo disappear

any idea?

i did leave ‘add_action( ‘generate_inside_navigation’,’tu_navigation_logos’ );’ and still nothing

Thanks

[Leo]

Try this CSS to go with the snippet instead:

.home .navigation-logo.sticky-only {
    display: none;
}

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

.home .navigation-stick .navigation-logo:not(.sticky-only) {
    display: none;
}

[celito]

Hi Tom, we had a slight makeover, one of which was redesigning the logo. I can’t make it to show in the sticky menu. Instead the previous logo is still showing in the sticky menu, even if this has been deleted from the media library. If I remember right, wasn’t there a facility in the customizer before to change the sticky logo? I tried following the suggestion in your reply of April 11, 2017 to Marie, above, but wasn’t able to make it work. Any help will be greatly appreciated. Thanks.

Celito

[Leo]

Hi Celito,

That sounds like a caching problem to me.

Any chance you can open a new topic and link us to your site?

Thanks!

[celito]

I’ll check the cache first, and open a new topic if it does not work. Thanks.

Celito

[celito]

Hi Leo, just for my curiosity to what file should I add the hooks described? Maybe this is where I went wrong.

Celito

[Leo]

One of these method: https://docs.generatepress.com/article/adding-php/

Again please open a new topic for further assistance 🙂 Thanks!

[Author]

Posts