Need help? Check out our Support site, then


Twenty Eleven Menu Links

  1. authorssullivan
    Member

    I'm using the Twenty Eleven theme and the menu links are set to the left side of the menu bar. Is there any way to center them? Thank you for your help.

    The blog I need help with is authorstephaniesullivan.wordpress.com.

  2. I went to Google search and used the following search string to find the answer for you:
    Twenty Eleven center menu site:en.forums.wordpress.com
    full results > http://tinyurl.com/a8cavyj

    See http://en.forums.wordpress.com/topic/twenty-eleven-aligning-to-center-the-navigation-menu-css?replies=6

  3. authorssullivan
    Member

    I tried that, but it still didn't work. This is what I have in my CSS. Any ideas what's wrong?

    #access {
    background: #c9b89b;
    text-align: center;
    clear: both;
    display: block;
    float: left;
    margin: 0 auto 6px;
    width: 100%;
    }

    #access ul {
    font-size: 20px;
    list-style: none;
    margin: 0 0 0 -.8125em;
    padding-left: 0;
    }

    #access li {
    float: left;
    position: relative;
    }

    #access a {
    color: #000000;
    display: block;
    line-height: 3.333em;
    padding: 0 1.2125em;
    text-decoration: none;
    }

    #access ul ul {
    display: none;
    float: left;
    margin: 0;
    position: absolute;
    top: 3.333em;
    left: 0;
    width: 188px;
    z-index: 99999;
    }

    #access ul ul ul {
    left: 100%;
    top: 0;
    }

    #access ul ul a {
    background: #ffffff;
    border-bottom: 1px dotted #000000;
    color: #000000;
    font-size: 18px;
    font-weight: normal;
    height: auto;
    line-height: 1.8em;
    padding: 10px;
    width: 168px;
    }

    #access li:hover > a,
    #access ul ul :hover > a,
    #access a:focus {
    background: #ffffff;
    }

    #access li:hover > a,
    #access a:focus {
    background: #ffffff;
    /* Older webkit syntax */
    color: #000000;
    }

    #access ul li:hover > ul {
    display: block;
    }

    #access .current-menu-item > a,
    #access .current-menu-ancestor > a,
    #access .current_page_item > a,
    #access .current_page_ancestor > a {
    font-weight: normal;
    }

  4. That's a complete section of the original stylesheet, with various modifications. Have you pasted the entire stylesheet in the CSS editor? Which mode is selected, Add-on or Replacement?

  5. authorssullivan
    Member

    I selected Replacement and I pasted the theme's CSS in the editor.

  6. That's a guaranteed way to mess things up when you're not an expert.

    The solution suggested by designsimply (in the thread timethief linked to) is correct, of course, but it may not work if you simply copypaste it into the editor will at the same time retaining all the original stuff. For instance, at the moment you've got both of these in your CSS:

    #branding .only-search + #access div {
        padding-right: 205px;
    }
    #branding .only-search + #access div {
        padding-right: 0;
    }

    So you should start by reverting to the Add-on mode, and enter only the changes you make.
    For example, you had changed only the font size of #access ul. Under the Add-on mode, you'll add only this:

    #access ul {
    	font-size: 20px;
    }

    And when designsimply tells you that one of the changes you need in order to center the menu is this:

    #access ul {
    	display: inline-block;
    	margin: 0;
    	padding: 0;
    }

    you won't paste the whole thing, you'll add the rules under the selector you have already added:

    #access ul {
    	font-size: 20px;
    	display: inline-block;
    	margin: 0;
    	padding: 0;
    }
  7. authorssullivan
    Member

    Thanks.

Topic Closed

This topic has been closed to new replies.

About this Topic