Tagged: Bootstrap, navigation, Unite
- This topic has 3 replies, 2 voices, and was last updated 5 years ago by
Aigars.
- AuthorPosts
- November 14, 2014 at 3:10 pm #13449
mgahs
ParticipantHi 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!
November 15, 2014 at 11:44 am #13470Aigars
Keymaster1. 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.
November 17, 2014 at 1:51 am #13538mgahs
ParticipantGreat! 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!
-MattNovember 17, 2014 at 7:42 am #13541Aigars
KeymasterMatt,
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. - AuthorPosts
- The topic ‘Centering the Title & Button Bar | Three column layout?’ is closed to new replies.