WordPress.com

1. visitorcenterdirector
   Member
   Jan 17, 2013, 7:47 PM

   I am trying to center the Navigation bar and Page Titles with the CSS editor. I have tried
   '#nav ul {
   display: inline-block;
   list-style-type: none;
   }'
   to try and center the navigation bar, but it didn't change anything in my preview. I was also wondering how to center the Page titles. All of this is for the Twenty Eleven theme.

   The blog I need help with is exploreclarkecounty.com.

2. designsimply
   Staff
   Feb 6, 2013, 4:36 PM

   I am trying to center the Navigation bar and Page Titles

   What you have is close! Note that Twenty Eleven uses an ID of "access" for the menu, so you'll want to use #access instead of #nav. Also, you need to add centering to the parent element if you use inline-block on the ul or li elements. Here is an example:

   #access ul {
   	text-align: center;
   }
   
   #access ul li {
   	display: inline-block;
   	float: none;
   	text-align: left;
   }

3. designsimply
   Staff
   Feb 6, 2013, 4:42 PM

   I was also wondering how to center the Page titles.

   In your custom CSS, you currently have this:

   #h1{text-align:center}

   That won't work because h1 is an HTML element and it doesn't need a "#" in front of it for CSS. In CSS, you can use the "#" to target HTML elements that have ID values. For example, if you had HTML that said <h1 id="hello">Title</h1> then you could target it by using "#hello" in your CSS to target only that specific title and not any others or just "h1" to target all h1 elements throughout the site.

   To center the titles on pages in the Twenty Eleven theme, you can use a class selector. It's similar to an ID selector, except you use a "." instead of a "#" to target. Here is an example:

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

   The ".singlular" part means that it just affects single pages and not posts or other types of pages.

Topic Closed

This topic has been closed to new replies.