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

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

Home Forums Support How to get Text Widget to place below the Logo in the Header?

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

    #1586680
    Ying
    Staff
    Customer Support

    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 πŸ™‚

    #1586701
    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.

    #1586707
    Ying
    Staff
    Customer Support

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

    ​
    ​

    #1586710
    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.

    #1587475
    Ying
    Staff
    Customer Support

    No problem πŸ™‚
    Always happy to help!

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