Moving Site Tagline Below Logo

Hi Steven, glad you're enjoying GP :)

1. Best way to do this is using GP Hooks. First, go to "Appearance > Customize > Header Content" and disable the tagline.

2. Now go to "Appearance > GP Hooks" and add this inside the "After Header Content" hook:

<p class="site-description">Your tagline here</p>

3. To change the color, go to "Appearance > Customize > Colors > Header Colors" - in there you'll see a "Tagline" option.

Hope this helps!

Great Job with GP Hooks. share more possibilities about the uses about it and share some woo commerce CSS responsive

Anything is really possible in GP Hooks, it doesn't have many limitations.

As for WooCommerce, our new WooCommerce add-on is shipping in the next version of GP Premium :)

Hi Tom:
followed instructions as per hooks to move tagline below logo header.
Each time I update (publish) the site displays my logo and underneath Your Tagline here..
I must be doing something wrong but I do not think so?
Howard

I added the text to the box and before that disengaged tagline..then put your code in the hook below header. (of course saved HOOKS)
thanks howard

Hi Howard,

That method should still work.

Can you link us to the site?

If you need to keep it private, feel free to start a new topic so you can use the URL field that only myself and Tom can see.

Thanks!

The hook solution after header content works for me on desktop, but on mobile the site-navigation gets between logo and description. Anything I can do?

Hi Robert,

can you start a new topic and provide a link to the site?

Thanks for this solution (and great theme)!

Taking it a step further, if you check "Execute PHP", you can insert the existing tagline that is set in the customizer and general settings.

<p class="site-description"><?= get_bloginfo( 'description' ); ?></p>

Hey all! I followed the steps to set up the hook but for some reason the tagline is displayed next to rather than under the logo: https://shopdoge.xyz/

Any input as to why? Or how I can get it below the logo?

Hi TJ,

You could try to add this CSS:

.inside-header {
    flex-direction: column;
}

Hi Ying,

Thanks for the recommendation! That gets the tagline under the logo, but it also moves the logo and the tagline both to the center.

I haven't seen the layout before the tagline being added, so what layout are you looking for?

Logo and tagline to the left? If so, try add this as well :)

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

Yes, that did it. Thank you!!!