[Resolved] Button in header

[Clinton]

Hi,

I’m trying to place a call to action button in my header, on the right hand side. When I add the button it moves the logo to the left and off centre. Is there is a way to keep the logo central?

Please help!

PS I have removed it for now as I wasn’t happy with the way it looked.

[Leo]

Hi there,

Can you add the button back in so I can try some CSS?

Let me know 🙂

[Clinton]

Back in

[Leo]

Try this:

@media (min-width: 769px) {
    .header-widget {
        float: none;
        position: absolute;
        right: 40px;
    }
}

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

[Clinton]

That’s brilliant, works like a charm.

Thank you very much!

[Clinton]

Resolved

[Leo]

No problem 🙂

[Clinton]

Hey all,

Leo kindly helped me with some CSS which is perfect.

I have a follow up that I am hoping you can help me with…

I don’t want this button to show on mobile devices /small screens

Any help would be greatly appreciated.

[Leo]

You can use the built-in hide-on classes:
https://docs.generatepress.com/article/responsive-display/#using-our-hide-on-classes

[Clinton]

That’s great, got it sorted – thank you for your help.

[Leo]

No problem 🙂

[Author]

Posts