[Resolved] Move header widget

[Leanne]

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.

[Elvin]

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.

[Leanne]

Hi,

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

[Elvin]

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

[Leanne]

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

[Elvin]

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

[Leanne]

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?

[Elvin]

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

[Leanne]

That is perfect. Thank you so much.

[Elvin]

No problem. Glad to be of any help. 🙂

[Author]

Posts