Archived topic
How i add tagline below logo in primary nav :)
8 replies · Started by Mohit on July 13, 2018
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
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 :)
Hey leo, is there any filter that can be used for this?
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' ) ) )
);
}
Thanks Tom, that's what I wanted.. Thanks Leo as well :)
But it's not visible on mobile.
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' ) ) )
);
}
Thanks it worked!! I just noticed logo in nav menu is not clickable. how can i make it clickable? Thanks
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' ) ) )
);
}
Looks good! :)