WordPress.org

Ready to get started?Download WordPress

Forums

Twenty Eleven - How to Center Navigiation Menu? (20 posts)

  1. TheEnglishSpy
    Member
    Posted 2 years ago #

    Hey guys, I want to center the navigation menu. And I tried a lot of CSS ways, but I'm overlooking something. How do I do it? Thanks in advance!

  2. esmi
    Theme Diva & Forum Moderator
    Posted 2 years ago #

    Do not edit the Twenty Eleven theme. It is the default WordPress 3.2 theme and having access to an unedited version of the theme is vital when dealing with a range of site issues.

    For this reason, it is recommended that you consider creating a child theme for your customisations. Once your child theme is active, we should be able to help with the customisation.

  3. TheEnglishSpy
    Member
    Posted 2 years ago #

    Hi Esmi, thanks, child themes are great for fiddling around, but still.. any know how on how to fix it? Rich.

  4. esmi
    Theme Diva & Forum Moderator
    Posted 2 years ago #

    Unless you provide a link to a page demonstrating the problem, no one will be able to offer much in the way of assistance.

  5. Bozz
    Member
    Posted 2 years ago #

    Try this in a child theme of twenty eleven, just copy the twenty elevent style.css to the child theme directory:

    here are the changes in the CSS, you'll have to find the appropriate places in the CSS (or use the !important tag in a blank style.css). These are not intended for direct cut and paste, but they are the relevant CSS to modify to get the nav to align center.

    delete from
    #access { float:left; }

    add to
    #access { text-align:center; }

    add to
    #access ul { display:inline-block; }

    edit margin in

    #access div {
    	margin: 0 0 0 0;
    }

    Hope this helps!

  6. tofino
    Member
    Posted 2 years ago #

    Thanks Bozz Media, Just what I was looking for.
    And Thanks EnglishSpy for posting the question.

  7. Bozz
    Member
    Posted 2 years ago #

    My pleasure, glad it helped!

  8. keturah
    Member
    Posted 2 years ago #

    Hello, I am having this problem as well. I was able to change the font and color of the navigational bar in my child theme, but can't figure out how to center the menu items. I tried the CSS above and it moved things around a bit, but it did not center them. Any help would be greatly appreciated. Website below.

    http://keturahdavis.com/testsite/

  9. billystarponturtle
    Member
    Posted 2 years ago #

    I am having the same problem. I can't seem to move them over even with the code above.

    http://www.billystarponturtle.com/contact

  10. Luis Abarca
    Member
    Posted 2 years ago #

    keturah, add this code at the end of your styles.css.

    The menu div has a padding-right of 250px, thats why doesn't appear centered.

    #branding .only-search + #access div {
        padding-right: 0px;
    }
  11. Luis Abarca
    Member
    Posted 2 years ago #

    You have the same problem @billystarponturtle, just remove the padding-right

  12. Luis Abarca
    Member
    Posted 2 years ago #

    I'm sorry, when zero is always zero ;)

    #branding .only-search + #access div {
        padding-right: 0;
    }
  13. keturah
    Member
    Posted 2 years ago #

    Thanks so much!

    This seemed to work but for some reason, with these changes, my navigational bar got a bit taller or thicker than it was before and the hover block doesn't match up. There is extra purple space under the white hover block. I looked at @billystarponturtle's site and his is doing the same. Is it something in the hover code that need to be changed?

    Thanks in advance!

  14. Lazarith
    Member
    Posted 2 years ago #

    Can any of you please help me out? I have tried and tried copying the coding above into my twentyeleven-child theme/style.css and I can't get the pages under my header "Cheeky Mouth" to center.

    Can you help? Her is a link to the site:
    http://www.cheekymouth.com

  15. Lazarith
    Member
    Posted 2 years ago #

    Finally got it. I used the Bozz's code above, THANKS A TON!!!!

  16. Explorz
    Member
    Posted 2 years ago #

    Hi,

    I've followed all the code, but my menu bar is now a little taller and the hover block doesn't line up. It doesn't reach to the bottom of the menu.

    How do I either increase the hover block or return the menu to be a little thinner?

    thanks.

    http://truenorthalliance.com/blog/

  17. Explorz
    Member
    Posted 2 years ago #

    Has anyone found an answer to the thicker nav bar not accommodating the hover block?

    Thanks

  18. Explorz
    Member
    Posted 2 years ago #

    I found an answer.

    Add this code to #access

    line-height: 0em;

  19. Chad Warner
    Member
    Posted 2 years ago #

    Thanks Bozz, your solution worked almost perfectly; I also had to follow Explorz's suggestion of adding #access { line-height: 0; }

  20. Explorz
    Member
    Posted 1 year ago #

    With the update to the twenty eleven theme, I find that my menu now is only centered if I choose the option to Display the Header Text. When I turn off that option, my menu shifts to the left and is no longer centered. Any ideas?

    http://www.chesswork.com/coaching/

Topic Closed

This topic has been closed to new replies.

About this Topic