[Resolved] Change logo URL class only on mobile

[Sebastien]

Hi GP team,

Could you please tell me how I can change the class for the logo link only on mobile devices please? I want to generate a popup whenever someone clicks on the mobile logo and for that I need to have a specific class used for the link.

Many thanks
Sebastien

[David]

Hi there,

are you using the Mobile Header ?

[Sebastien]

Hi,

Yes, I am.

[David]

This filter will allow you to do that:

https://docs.generatepress.com/article/generate_mobile_header_logo_output/

[Sebastien]

This is perfect, thank you. The only thing is that I do not want to rewrite the whole output just change the class for the logo link. Ideally, I could probably copy the code which is already written in the theme in this filter and add the class, would that work? Could you please give me the built in code if possible?

Many thanks
Sebastien

[David]

You need to return the entire HTML. To add a class to the <a> element you would do something like this:

add_filter( 'generate_mobile_header_logo_output', function( $output ) {
    if ( ! function_exists( 'generate_menu_plus_get_defaults' ) ) {
        return $output;
    }

    $settings = wp_parse_args(
        get_option( 'generate_menu_plus_settings', array() ),
        generate_menu_plus_get_defaults()
    );

    return sprintf(
        '<div class="site-logo mobile-header-logo">
            <a class="your-class" href="%1$s" title="%2$s" rel="home">
                <img src="%3$s" alt="%4$s" />
            </a>
        </div>',
        esc_url( apply_filters( 'generate_logo_href' , home_url( '/' ) ) ),
        esc_attr( apply_filters( 'generate_logo_title', get_bloginfo( 'name', 'display' ) ) ),
        esc_url( apply_filters( 'generate_mobile_header_logo', $settings['mobile_header_logo'] ) ),
        esc_attr( apply_filters( 'generate_logo_title', get_bloginfo( 'name', 'display' ) ) )
    );
} );

[Sebastien]

Amazing, thank you 🙂

[David]

You’re welcome

[Author]

Posts