Need help? Check out our Support site, then


Centering Nav Bar and Page Titles

  1. 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. 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. 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.

About this Topic