[Support request] How to get Text Widget to place below the Logo in the Header?

[Jane]

Hi there

Hoping you can help.

I’m sure there must be a simple solution to this that I’m missing.

I’ve added a text widget to the Header but it is displacing my logo (which I want to remain centere) to the left and sitting level with it on the right hand side on desktop .. and on mobile the text widget is sitting at the top of the screen above the header.

It’s an affiliate disclosure statement that I want to sit BELOW the header on both desktop and mobile, and ideally below the Menu as well. I want the header to remain at the top and centered. So from the top down it woul be: centered logo, centered menu, centered widget text.

There’s got to be an easy way to do this, right?

Non-technical so hoping you can talk me through it if it involves code!

Thanks heaps
Jane

[Ying]

Hi Jane,

We could use a hook element instead of a header widget to achieve what you are looking for.

Here’s an article of how to create a hook element.
https://docs.generatepress.com/article/hooks-element-overview/

When you create the hook element, add this to the content field:

<div class="affiliate">
We are reader supported. As an Amazon Associate we earn a commission from qualifying purchases.
</div>

Choose generate_after_header hook and set display rule to the pages you’d like to show this text or to the entire site depends on your needs.

Then add this css to center the text:

.affiliate {
    text-align: center;
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

Let me know if it works 🙂

[Jane]

Thanks Ying! And thanks for giving instructions even I can follow 🙂

That works — but the text is larger than the font used in the Menu which looks a little odd. How can I make the text a lot smaller? And can I also perhaps grey it out, rather than have it black? And maybe even italicize it?

You’re a lifesaver.

[Ying]

You are very welcome 🙂
​
Try to replace the css I gave to you previously:

​.affiliate { 
    ​ text-align: center; 
​}

​with this:

​.affiliate {
    text-align: center;
    color: #666666d9;
    font-size: 14px;
    font-style: italic;
}

​
​

[Jane]

Ying! Fantastic! That works a treat.

You’ve sorted me out — and so fast!

Really appreciate you knowing what you’re doing and getting me such a great result, thanks so much.

[Ying]

No problem 🙂
Always happy to help!

[Author]

Posts