[Resolved] Adding custom SVG Mobile logo

[Matic]

Hi,
a while ago, I created a SVG path logo using code I found in a support thread on this forum. This is the code I added to my child theme’s Functions.php:

add_filter( 'generate_logo_output', function() {
return sprintf( // WPCS: XSS ok, sanitization ok.
'<div class="site-logo">
  <a href="%1$s" title="%2$s" rel="home">
    <svg>MY_SVG
    </svg>
  </a>
</div>',
esc_url( apply_filters( 'generate_logo_href' , home_url( '/' ) ) ),
esc_attr( apply_filters( 'generate_logo_title', get_bloginfo( 'name', 'display' ) ) )
);
} );

Now, I want to do the same with my Mobile logo, but I cannot figure it out. This is the code I’m using:

add_filter( 'generate_mobile_header_logo_output', function() {
return sprintf( // WPCS: XSS ok, sanitization ok.
'<div class="site-logo mobile-header-logo">
  <a href="%1$s" title="%2$s" rel="home">
    <svg>MY_MOBILE_SVG
    </svg>
  </a>
</div>',
esc_url( apply_filters( 'generate_mobile_header_logo', $settings['mobile_header_logo'] ) ),
esc_attr( apply_filters( 'generate_logo_title', get_bloginfo( 'name', 'display' ) ) )
);
} );

Any ideas?

Cheers,
Matic

[Elvin]

Hi there,

generate_mobile_header_logo_output is used if you have mobile header enabled.

But yes, if you have that enabled, you should use that filter as well.

Example:

add_filter( 'generate_mobile_header_logo_output', function( $output ) {
    return sprintf(
        '<div class="site-logo mobile-header-logo">
            <a href="%1$s" title="%2$s" rel="home">
                [YOUR INLINE SVG HERE]
            </a>
        </div>',
        esc_url( apply_filters( 'generate_logo_href', home_url( '/' ) ) ),
        esc_attr( apply_filters( 'generate_logo_title', get_bloginfo( 'name', 'display' ) ) )
    );
} );

[Matic]

Hi Elvin,

I did try that.

In addition, I disabled my CDN, my caching, removed custom CSS, and copied your code.
Unfortunately, the mobile logo still does not show.

Cheers,
Matic

[David]

Hi there

can you share a link to the site where we can ‘see’ the missing logo.

[Matic]

Here, for example: https://www.photutorial.com/

[David]

Do you have a logo set in the Customizer > Layout > Header for the Mobile logo? If not, can you add one.

[Matic]

Hey David,

this actually fixed the problem. I just assigned a random image as logo, and my SVG path logo popped-in. 😮

Thank you for you help.

Cheers,
Matic

[David]

Glad to be of help

[Author]

Posts