[Resolved] Filter Title to use SVG inline to replace Logo & Title

[David]

Ooops sorry – you will need to use: generate_sticky_navigation_logo_output for the sticky nav.

[Rafał]

I don’t know how to use generate_sticky_navigation_logo_output. I can’t find such at available filters collection.
I’ve figured out other solution:
Hook generate_inside_navigation, priority less than 10.
My code:

<div class="navigation-branding">
	<div class="sticky-navigation-logo">
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" width="40" height="40" class="is-logo-image" alt="my logo">
			<use href="#svg-logo" id="sticky-nav-logo"/>
		</svg>
	</div>
</div>

Of course, I use another hook with SVG defs for #svg-logo reference.

There’s need to hide duplicated logo when nav is not stuck:

.stuckElement:not(.is_stuck) .navigation-branding {
	display: none;
}

How do you think about it?

[Tom]

That works, but the filter may be better for future updates:

add_filter( 'generate_sticky_navigation_logo_output', function() {
    return sprintf(
        '<div class="sticky-navigation-logo">
            <a href="%1$s" title="%2$s" rel="home">
                YOUR INLINE SVG CODE HERE
            </a>
        </div>',
        esc_url( apply_filters( 'generate_logo_href', home_url( '/' ) ) ),
        esc_attr( apply_filters( 'generate_logo_title', get_bloginfo( 'name', 'display' ) ) )
    );
} );

[Rafał]

Now works. Thanks a lot 🙂

Merry Christmas!

[Tom]

You’re welcome. Merry Christmas! 🙂

[Author]

Posts