[Resolved] Mobile header: enable both logo and site title AND make both clickable

[Guido]

I have space for both the logo and the site title in the mobile header. But the Branding Type dropdown does not offer “Logo AND Site title” as an option.

Maybe I’m missing an existing support topic or documentation link. Any help you’re willing to give would be very much appreciated!

At first I tried adding the logo as a before element to the site title (active as Branding Type)

#mobile-header .main-title a::before {
content: url('url-removed');
	display: inline;
	max-height: 10px !important;
	max-width: 15px !important;
}

But the logo size wouldn’t budge.

So I thought I was being clever by adding the title as an element after the logo (active as Branding Type)

.mobile-header-navigation .mobile-header-logo::after {
content: "Site title";
color:#000;
	display: inline;
	font-weight: bold;
	font-size: 25px;
font-family: "dancing script", sans serif;
	margin-left: 10px;
}

It looks roughly the way I’d like it to, but the site title is not clickable and that doesn’t seem to be possible without further shenanigans for before/after elements, because of reasons.

So I figured there is bound to be a smarter way of doing this with Generatepress. Thanks in advance for your time. 🙂

URL provided in private to customer support.

[David]

Hi there,

you can use the generate_mobile_header_logo_output filter:

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

This way you can add HTML for the site title within the <a> tag itself.

[Guido]

Awesome, thanks so much David!
The logo and site title are now both showing one the same line and are both clickable.

Here’s what I ended up using, maybe it will help someone else in the future.

I modified the code in functions.php to the following (adding custom classes to the logo image and site title text and removing the lazy load parameter)

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 href="%1$s" title="%2$s" rel="home">
			<img src="%3$s" alt="%4$s" class="mobile-header-logo-image" /> <span class="mobile-header-logo-title">YOUR SITE TITLE TEXT HERE</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' ) ) )
    );
} );

And used the follow custom css

.site-logo.mobile-header-logo img {
	display: inline; 
	margin-top: 10px; }

.mobile-header-logo-title {
        color:#000;
	display: inline;
	font-weight: bold;
	font-size: 25px;
        font-family: "dancing script", sans serif;
        margin-left: 10px;
	padding: 10px 0 15px;
        position: absolute;
        top: 50%;
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
}

Thank you for the awesome support once again!

[David]

Glad to hear that!

[Author]

Posts