[Resolved] How i add tagline below logo in primary nav :)

[Mohit]

Hi guys, I want to add tagline below logo in “primary nav” and align tagline center below logo.. I see there’s no option to add tagline below logo. Thanks

I also want tagline to be there in mobile header below logo

[Leo]

Hi there,

The best solution would be to incoporate the tagline with the logo image for better consistency on multiple screen sizes/mobile as suggested in the first sentence here:
https://docs.generatepress.com/article/putting-site-title-next-logo/

Would you consider that?

Let me know 🙂

[Mohit]

Hey leo, is there any filter that can be used for this?

[Tom]

So you want static text below your current navigation logo? Any examples?

You could try this:

add_filter( 'generate_navigation_logo_output', 'tu_nav_logo_tagline' );
function tu_nav_logo_tagline( $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 sticky-logo navigation-logo">
            <img class="header-image" src="%1$s" alt="%2$s" />
            <div class="nav-tagline">
                Your tagline
            </div>
        </div>',
        esc_url( apply_filters( 'generate_navigation_logo', $settings['sticky_menu_logo'] ) ),
        esc_attr( apply_filters( 'generate_logo_title', get_bloginfo( 'name', 'display' ) ) )
    );
}

[Mohit]

Thanks Tom, that’s what I wanted.. Thanks Leo as well 🙂

But it’s not visible on mobile.

[Tom]

You can do something similar with the mobile header:

add_filter( 'generate_mobile_header_logo_output', 'tu_mobile_header_logo_tagline' );
function tu_mobile_header_logo_tagline( $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 href="%1$s" title="%2$s" rel="home">
                <img class="header-image" src="%3$s" alt="%4$s" />
                <span class="nav-tagline">
                    Your tagline
                </span>
            </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' ) ) )
    );
}

[Mohit]

Thanks it worked!! I just noticed logo in nav menu is not clickable. how can i make it clickable? Thanks

[Mohit]

I edited the code you provided I hope I have made no silly mistake here

add_filter( 'generate_navigation_logo_output', 'tu_nav_logo_tagline' );
function tu_nav_logo_tagline( $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 sticky-logo navigation-logo">
			<a style="color:#3A3A3C;" href="%1$s" title="%2$s" rel="home">
            <img class="header-image" src="%3$s" alt="%4$s" />
			<div class="nav-tagline">
                Professional, Trustworthy, Honest.
            </div>
			</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_navigation_logo', $settings['sticky_menu_logo'] ) ),
        esc_attr( apply_filters( 'generate_logo_title', get_bloginfo( 'name', 'display' ) ) )
    );
}

add_filter( 'generate_mobile_header_logo_output', 'tu_mobile_header_logo_tagline' );
function tu_mobile_header_logo_tagline( $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 href="%1$s" title="%2$s" rel="home">
                <img class="header-image" src="%3$s" alt="%4$s" />
                <span class="nav-tagline">
                    Professional, Trustworthy, Honest.
                </span>
            </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' ) ) )
    );
}

[Tom]

Looks good! 🙂

[Author]

Posts