Menu (and posts) centering

Hello,

Thanks for the excellent support you all provide.

I have a couple menu-related questions: I would like to horizontally center the menu, and vertically align it. Currently I am using this code to horizontally align it; let me know if there’s any changes I should make.

.header-wrap .container > .row {
display: block !important;
}

.site-header .col-md-4, .site-header .col-md-8 {
min-height: 0;
width: 100% !important;
max-width: 100% !important;
display: block !important;
text-align: center !important;
}

#mainnav li {
float: none !important;
display: inline-block !important;
}

#mainnav ul li a {
float: none !important;
}

#mainnav {
float: none !important;
}

As far as vertically aligning,I have a couple different menu elements - a logo on the left side of the menu, and then the other text buttons. It looks like my logo is vertically centered, but I would like to vertically center the other menu elements as well. What would be the best way to do that?

Link to site: https://freedmfounders.staging.wpengine.com/blog/

Also, for this blog posts page, how can I horizontally center the post previews? (I.e. the page content.)

Thank you!

Hi,

You can vertically center the menu items with this Custom CSS:

#mainnav li {
    vertical-align: middle !important;
}

Please add the above CSS to your Child Theme’s style.css or in case you haven’t setup a Child Theme already, then you can also add the CSS to wp-admin -> Appearance -> Customizer -> Additional CSS so you won’t loose the changes after Theme or WordPress updates.

Please let me know how it works.

Kind Regards,
Csaba

That worked, thank you! Any suggestions on my second question, how to center blog/blog preview content?

Hi,

You can make the blog page full-width ( which will center the blog page with this Custom CSS:

.blog .content-area.col-md-9 {
    width: 100% !important;
}

also you can center the blog post preview content with this Custom CSS:

.entry-post p {
    text-align: center !important;
}

Your blog post images are smaller then the width the of the page ( in now full-width mode ), so you may need to add larger images if you want to make them full-width.

Please let me know how it works.

Kind Regards,
Csaba

Thanks! I ended up using some code from this topic, which seems to work well: Centering all post/page content

Thank you again!

Hi,

Great! I’m glad it’s resolved! If you need help with anything else, please open a new topic.

Have a nice day!

Kind Regards,
Csaba