Centering the Title & Button Bar | Three column layout?

[mgahsParticipant]

Hi everyone!

My site can be found at http://shannonandmatt.info

I’d like to do two things:

1) I’d like to center the title (“Shannon and Matt” and the date) within the header, and i’d like to center the menu buttons.

2) I’d also like to have something similar to a three-column layout, but leaving the outside columns empty, so the page content is center-weighted (but still left-justified). In page.php, I commented out <?php get_sidebar(); ?> and in <div id=”primary”> I changed “col-md-8” to “col-md-10” to get the padding I like on the left side, i’m just not sure how to add the same padding on the right side.

Thanks!

[AigarsKeymaster]

1. First part of the code will center title and date and the second part will take care of top navigation bar. Add this code to Theme Options – Other – Custom CSS.

.site-branding {
    width: 100%;
    text-align: center;
}
@media (min-width: 1024px) {
    .navbar-nav { 
        margin: 0 15%;
    }
}

2. To add margins on both sides, so content area still remains in the middle of the page you need to add offset as well. Bootstrap, on which this theme is built on, has it by default, so you can replace

col-md-10

with

col-md-10 col-md-offset-1

It will add 1 column worth of margin on both sides. You can read more about it here.

[mgahsParticipant]

Great! Both of those worked perfectly!

One more question:

http://shannonandmatt.info/?page_id=5

You can see both of your suggestions on this page (thanks, again!), however the page title is still left-justified. How could I center that as well?

Thanks!
-Matt

[AigarsKeymaster]

Matt,

Then add this line to the same Custom CSS field in Theme Options as well

.page .entry-title {
    text-align: center;
}

It will center only page titles but will leave blog titles in place. If you happen to use blog and what to center post titles as well then just remove .page from code given above and it will work everywhere.

[Author]

Posts