[Resolved] Site Title in two lines using Navigation as Header

[ANGELA]

Hi,
I am using the “Aroma” template from the GeneratePress site library, which uses the navigation as a header. Because my site title is too long, I would like to display it in two lines. Could you please tell me how I can make it possible?
Thanks so much for your help
Angela

[David]

Hi there,

so the Site Title field in WP customizer won’t support HTML or line breaks.
You will need to use a PHP Snippet like this:

add_filter( 'generate_site_title_output', function( $output ) {
    $titleHTML = '<span class="line-one">Line one</span><span class="line-two">line two</span>';
    return sprintf(
        '<%1$s class="main-title" itemprop="headline">
	<a href="%2$s">%3$s</a>
	</%1$s>',
	( is_front_page() && is_home() ) ? 'h1' : 'p',
	esc_url( apply_filters( 'generate_site_title_href', home_url( '/' ) ) ),
	$titleHTML
    );
});

On this line : $titleHTML = '<span class="line-one">Line one</span><span class="line-two">line two</span>';
You need to change the text between the span tags for your title.

How to add PHP: https://docs.generatepress.com/article/adding-php/

Then add a little CSS to stack them:

.main-title span {
    display: block;
}

[ANGELA]

Thanks so much; I will try to do it!

[ANGELA]

Hi David,
I added the snippet and the CSS code, but unfortunately, it is not working.
Thanks

[David]

Can i see the site ?

[ANGELA]

Yes, sure: https://muju.website/

[Fernando]

Hi Angela,

That’s odd. May we know how you specifically added the PHP snippet?

[ANGELA]

Hi Fernando,
Here are two screenshots of the snippet and the CSS.

https://muju.website/wp-content/uploads/2022/12/Screenshot-2022-12-16-at-9.33.14-AM.png
https://muju.website/wp-content/uploads/2022/12/Screenshot-2022-12-16-at-9.35.55-AM.png

Thanks a lot!

[Fernando]

I see. Viewing your screenshot, it’s showing that the Snippet is currently not activated. Can you activate it first?

[ANGELA]

Oh, I see…
I just activated it!

[Fernando]

Great! Let us know how it goes.

[ANGELA]

Hi,
It doesn’t look good: https://muju.website/
Thanks

[Fernando]

I see. Can you update the CSS code provided previously to this one?:

.main-title span {
    display: block;
    line-height: 1.2;
    text-align:center;
}

Let us know how it goes.

[ANGELA]

Hi,
That worked perfectly!
Is it possible to display it also in the center on mobile? now it looked like this:
https://muju.website/wp-content/uploads/2022/12/WhatsApp-Image-2022-12-16-at-11.41.40.jpeg
Thank you

[Fernando]

Yes, it’s possible.

Can you try adding this CSS?:

.inside-navigation .navigation-branding {
    justify-content: center;
}

Let us know how it goes.

[Author]

Posts