[Resolved] Header Widgets on the same Line

[CCL Live]

Hello,

I would like to have all my header widgets on the same line.
Il will have the search field then the facebook icon and finally the cart icon.
You can see the result on my website: https://www.ccl-live.fr/dev/
Per advance, thank you

Thibault

[Elvin]

Hi,

You can put all the header widgets on the same line by adding this CSS code:

.header-widget {
    display: flex;
    align-items: center;
}

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

[CCL Live]

Hello,

Thank you for your answer.
I put your css code and it’s not changing anything.

Thibault

[Leo]

I’m not seeing Elvin’s CSS being added currently.

Can you add it in so we can see why it’s not working?

I just tried the CSS and it worked for me.

Let me know 🙂

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

[CCL Live]

Hello,

Thank you it’s working. I made a mistake when i put the css.
Another problem on this page when I put 2 pictures on the right of the search form. They are not on the same line.
Per advance, thank you

Thibault

[Leo]

Try this:

.header-widget .widget {
    padding: 0;
}

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

[CCL Live]

Hello,

Thank you a lot it’s working.
Do you have any idea to vertically center widgets?
Per advance, thank you

Thibault

[David]

Hi there,

try adding this CSS:

@media(min-width: 769px) {
    .inside-header {
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
    }
    .header-widget {
        margin-left: auto;
    }
}

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

[CCL Live]

Hello,

Thank you it’s working perfect.

Thibault

[David]

You’re welcome

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

[Author]

Posts