Site logo

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

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

Home Forums Support Site Title in two lines using Navigation as Header

Viewing 15 posts - 1 through 15 (of 17 total)
  • Author
    Posts
  • #2456829
    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

    #2456897
    David
    Staff
    Customer Support

    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;
    }
    #2462454
    ANGELA

    Thanks so much; I will try to do it!

    #2462587
    ANGELA

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

    #2462643
    David
    Staff
    Customer Support

    Can i see the site ?

    #2463379
    ANGELA
    #2463527
    Fernando
    Customer Support

    Hi Angela,

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

    #2463562
    ANGELA
    #2463573
    Fernando
    Customer Support

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

    #2463575
    ANGELA

    Oh, I see…
    I just activated it!

    #2463580
    Fernando
    Customer Support

    Great! Let us know how it goes.

    #2463592
    ANGELA

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

    #2463594
    Fernando
    Customer Support

    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.

    #2463611
    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

    #2463616
    Fernando
    Customer Support

    Yes, it’s possible.

    Can you try adding this CSS?:

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

    Let us know how it goes.

Viewing 15 posts - 1 through 15 (of 17 total)
  • You must be logged in to reply to this topic.