[Resolved] Move header widget

Home Forums Support [Resolved] Move header widget

Home Forums Support Move header widget

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1631942
    Leanne Foulger

    Hi,

    At the top right of the website you will see the words “We take care of all your consignment needs”

    I would like to move the words to the top left of the page.

    Thank you.

    #1631948
    Elvin
    Staff
    Customer Support

    Hi,

    You can try placing the Text on the left side as Hook Element instead of a widget. You then set the Hook Element’s display rule to “Entire Site” and its hook settings to generate_before_header_content and set the priority to 1 so it appears before the logo.

    Once applied, you may have to set its CSS. Let us know once you’ve applied it so we could check the site and help you with the CSS writeup.

    A wise man once said:
    "Have you cleared your cache?"

    #1631958
    Leanne Foulger

    Hi,

    How do I place the Text on the left side as Hook Element?

    #1631965
    Elvin
    Staff
    Customer Support

    More about Hook Element here:
    https://docs.generatepress.com/article/hooks-element-overview/

    To create a Hook Element, go to Appearance > Elements and click “Add New Element” on found on the upper left side. https://share.getcloudapp.com/geu4j6oP

    You then set the Hook Element’s hook settings to generate_before_logo and set the priority to 1 so it appears before the logo.
    https://share.getcloudapp.com/o0uEbr6j

    You then set the display rule location to “Entire Site” so it applies to the entire site.
    https://share.getcloudapp.com/4gu1wk2q

    A wise man once said:
    "Have you cleared your cache?"

    #1631973
    Leanne Foulger

    Ok. Thanks…

    Now how do I move it inline with the logo so both are at the top of the page. And the text needs to go to the left.

    Thank you

    #1632008
    Elvin
    Staff
    Customer Support

    You can then add this CSS:

    header#masthead .inside-header.grid-container {
        justify-content: unset;
        flex-direction: row;
    }
    
    header#masthead .inside-header.grid-container > * {
        flex: 0 0 33%;
    }

    Adding this CSS will result into this: https://share.getcloudapp.com/DOu2R55n

    A wise man once said:
    "Have you cleared your cache?"

    #1632023
    Leanne Foulger

    Thank you. We are getting there. I would like the text to be higher on the page…. basically at the top with a little padding at the top. Also a little further to the left.

    Is this possible?

    #1632033
    Elvin
    Staff
    Customer Support

    Try adding this CSS:

    header#masthead .inside-header.grid-container > font {
        align-self: start;
        text-align: left;
        margin-top: 1em;
    }

    I’ve added margin-top so it would match its siblings but you can remove it if you prefer not to have it.

    This is how it would look like when applied: https://share.getcloudapp.com/12uoep57

    A wise man once said:
    "Have you cleared your cache?"

    #1632039
    Leanne Foulger

    That is perfect. Thank you so much.

    #1632085
    Elvin
    Staff
    Customer Support

    No problem. Glad to be of any help. 🙂

    A wise man once said:
    "Have you cleared your cache?"

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