Archived topic

Adding custom SVG Mobile logo

7 replies · Started by Matic on March 7, 2021

Viewing posts 1–8 of 8

March 7, 2021 at 11:07 am #1685772

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

March 7, 2021 at 3:29 pm #1685970

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' ) ) )
    );
} );

March 8, 2021 at 6:37 am #1686574

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

March 8, 2021 at 7:22 am #1686833

Hi there

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

March 8, 2021 at 7:27 am #1686840

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

March 8, 2021 at 2:03 pm #1687304

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

March 9, 2021 at 12:20 pm #1688661

Hey David,

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

Thank you for you help.

Cheers,
Matic

March 9, 2021 at 1:28 pm #1688726

Glad to be of help

This archived topic is closed to new replies.

Start building better websites today.