[Resolved] Moving Site Tagline Below Logo

[Steven Coutts]

Hi there,

Brilliant theme, bought the update and it works a treat. Just wondering if there is a way to move the site tagline below the logo and also change the font and colour of the tagline.

Thanks

Steven Coutts

[Tom]

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!

[Luis]

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

[Tom]

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 🙂

[Howard]

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

[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

[Leo]

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!

[Robert]

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?

[David]

Hi Robert,

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

[Jeff]

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>

[TJ]

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?

[Ying]

Hi TJ,

You could try to add this CSS:

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

[TJ]

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.

[Ying]

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;
}

[TJ]

Yes, that did it. Thank you!!!

[Author]

Posts