Archived topic

Header widget inline center

5 replies · Started by Becky on February 5, 2018

Viewing posts 1–6 of 6

February 5, 2018 at 1:42 pm #488864

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;
}

February 5, 2018 at 7:00 pm #489028

Hi there,

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

February 6, 2018 at 5:46 am #489357

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/

February 6, 2018 at 9:23 am #489652

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;
}

February 6, 2018 at 12:18 pm #489790

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. :)

February 6, 2018 at 9:16 pm #490079

Sounds good! :)

This archived topic is closed to new replies.

Start building better websites today.