[Resolved] Site title AND site description when I "Use Navigation as Header" and Mobile on

[Olle]

Does not seem possible. Why?
I also want to show it with the sticky navigation and the mobile menu.

The menu options are really confusing and cumbersome to get to work. Takes a lot of time even for a simple task like this.

Regards
Olle

[Tom]

Hi there,

We opted to leave the site tagline out of the navigation branding, as there typically isn’t enough space for it.

However, you can add it back in using a filter:

add_filter( 'generate_site_title_output', function( $output ) {
    $tagline = '<div class="site-description">Your tagline here</div>';

    return $output . $tagline;
} );

Let me know if that helps or not 🙂

[Olle]

Hi
This seem to work if I put the code in the main theme functions.php

If I put the code in the child themes function.php it does not. It screws up the layout and shows the mobile menu on desktop an not the site tagline.among other things

Regards
Olle

[Olle]

Sorry. It was a misstake in the code I made.

Regards
Olle

[Tom]

No problem – all working now?

[Marius]

Hey Tom,

Any idea how can I position the site description under the site name? The CSS needed is more than I can handle…

Similar to the normal header. Logo on the left, site title and site description to the right of the logo, with description under title.

But when using the navigation as a header everything changes. Adding the site description with the help of the add_filter in functions.php, it adds the text but the text is to the right of the site title.

[David]

Hi there,

if you can raise a new topic and share a link to the site where we can see the alignment issue i can help with the CSS.

[Marius]

Hi David,
I went with the normal header after all so no need anymore for the css solution.
But thank you for your quick reply and your availability to help!

[David]

No problems 🙂

[William]

Aloha!

The snippet above worked great 🙂

Any idea how to best target and roll the Tagline under the Site Title?

Seen here: https://durp.manoa.hawaii.edu/

I tried display:block; on the Taglineʻs div … with no luck

Thanks 🙂

[Ying]

Hi William,

Give this CSS a try:

.navigation-branding {
    display: flex;
    flex-direction: column;
}

If you want it to align left, add this as well:

.site-description {
    margin-right: auto;
}

[William]

Thank you Ying! You the best.

🙂

[Ying]

No problem 🙂

[Author]

Posts