[Resolved] Header widget inline center

[Becky]

Hi all!

I am attempting to display the header widget (in our case, a newsletter subscription form) to the center of the header. I used the below code which I found on an old thread in here, but the form is displaying on the right side. I’d like for it to show up in the center and for the menu and search icons to be on the right. Any thoughts on how I would achieve this? Thanks in advance for your help!

.nav-float-right .header-widget {
    display: inline-block;
    top: 0;
}
.nav-float-right .inside-header .main-navigation {
    clear: none;
}

[Leo]

Hi there,

Can you give Tom’s method a shot here? https://generatepress.com/forums/topic/center-search-box-widget-in-header/#post-400343

[Becky]

Hi Leo,

Thanks for the response! I gave Tom’s method a try, but unfortunately all that did was move the form to the left side of the header: http://blog.mediaprowler.com/

[Tom]

This is where Flexbox is awesome.

Give this a shot:

.inside-header {
    display: flex;
    justify-content: space-between;
}

.inside-header .site-logo {
    order: 1;
    margin-right: auto;
}

.inside-header .header-widget {
    order: 2;
    margin-left: auto;
    margin-right: auto;
}

.inside-header .main-navigation {
    order: 3;
    margin-left: auto;
}

[Becky]

Worked like a charm – thanks, Tom!

I’m going to look into Flexbox a little deeper (I’ve never used it before), and see if I can get the three columns to stack on mobile. If I run into any roadblocks, I’ll let you know. 🙂

[Tom]

Sounds good! 🙂

[Author]

Posts