What CSS do I use to center the logo, title, and tagline on my site?

• 

  beckettpublishinggroup · Member · Mar 4, 2015 at 5:47 pm

  • Copy link
  • Add topic to favorites

  I’m using the Motif Theme. My title, tagline, and logo are all left justified. How do I center them? What CSS do I need to add to make that happen?

  The blog I need help with is: (visible only to logged in users)

• 

  jeremeylduvall · Member · Mar 4, 2015 at 6:04 pm

  • Copy link

  Hi!

  You should be able to do that using the code below:

  .site-branding {
  text-align: center;
  }
  
  .site-logo {
  	margin: 0px auto;
  }

  Can you place that under Appearance -> Customize -> CSS?

  Also, in case you’re interested in learning more about CSS, we have some awesome resources linked here:

  https://en.support.wordpress.com/custom-design/custom-css/#css-help

• 

  kourtneyheintz · Member · Mar 5, 2015 at 5:06 am

  • Copy link

  Thanks so much! This worked perfectly. I’ve tried searching through the resources, but I can never seem to find the CSS code that corresponds to what I want the page to look like.

• 

  jeremeylduvall · Member · Mar 5, 2015 at 2:31 pm

  • Copy link

  It can definitely be a bit tricky to find the correct selectors!

• 

  kourtneyheintz · Member · Mar 5, 2015 at 3:45 pm

  • Copy link

  One last question, how do I center the menu bar? Right now it’s left aligned. I searched through and found questions about this for other themes, but not for my theme. I tried pasting the CSS recommended for other themes but it didn’t work.

• 

  beckettpublishinggroup · Member · Mar 5, 2015 at 5:08 pm

  • Copy link

  Thanks. This helped. Appreciate the tip too.

• 

  jeremeylduvall · Member · Mar 5, 2015 at 7:54 pm

  • Copy link

  One last question, how do I center the menu bar?

  That was a bit trickier! This should work. Can you place the full code under Appearance -> Customize -> CSS?

  ul#menu-beckett-menu.menu.nav-menu {
  	text-align: center;
  }
  
  .main-navigation li {
  	display: inline-block;
  }
  
  @media only screen and (max-width: 480px) {
  	.main-navigation li {
  		display: inline;
  	}
  }

  The last bit fixes the menu on mobile devices (About Us and News were appearing on the same line).

• 

  beckettpublishinggroup · Member · Mar 5, 2015 at 11:59 pm

  • Copy link

  I pasted the code there but the menu options (About Us, Contact Us, and News) remain left aligned within the menu bar. Is there a way to make them centered within the menu bar?

  I apologize for all the questions. I’m just trying to center everything on the page. This is my last question, I promise.

• 

  jeremeylduvall · Member · Mar 6, 2015 at 5:02 pm

  • Copy link

  It seems like I removed a crucial element in my attempt to minimize the CSS. Sorry about that! Can you replace my failed attempt with this? float: none was the missing culprit.

  ul#menu-beckett-menu.menu.nav-menu {
  	text-align: center;
  }
  
  .main-navigation li {
  	float: none;
  	display: inline-block;
  }
  
  @media only screen and (max-width: 480px) {
  	.main-navigation li {
  		display: inline;
  	}
  }

• 

  beckettpublishinggroup · Member · Mar 6, 2015 at 6:31 pm

  • Copy link

  Thanks. It worked and the menu bar is centered. The website looks great.

• 

  jeremeylduvall · Member · Mar 6, 2015 at 9:55 pm

  • Copy link

  Excellent! :)