WordPress.org

Support

Support » How-To and Troubleshooting » [Resolved] How do I center the navigation bar/menu on the Twenty Eleven theme?

[Resolved] How do I center the navigation bar/menu on the Twenty Eleven theme?

Viewing 8 replies - 1 through 8 (of 8 total)
  • esmi

    @esmi

    Forum Moderator

    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.

    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!

    this doesnt work for me. can you please check my page.
    the text and te bars center perfectly, but i now my navbar height is higher then the height of my navBARS.

    check it out, and over over a bar and you will see.

    please let me know BOZZ

    thank you!!

    As far as I can tell, you haven’t followed the instructions. For instance, #access still contains float:left

    Double check that you have performed the above, update your theme and let us know if you still have a problem.

    sorry, i removed all of the lines you said above from my child theme cause it didnt work. but then you cant see whats wrong off course.
    please check it now.

    oh one more thing, i want the text in the SUBMENUS not to center. i would like them aligned to the right. but when i change
    #access { text-align:center; }

    to
    #access { text-align:left; }

    the bars itself arent centered, so i guess i have to add a new line?

    thank you very much!

    no answer??

    @brosikamp1991

    You seem to have worked it out and since I am struggling with the same thing atm and don’t have the insigt into CSS to decipher Bozz’s hints could you please try to explain how you managed it? 🙂

    Sorry for the delay, was on vacation! 🙂

    You may want to target your CSS more directly than just #access { text-align:left; } for instance #access ul ul a { text-align:left; }

    You definitely want to be pretty comfortable with CSS before taking my hints, they are more like shortcuts. I’m afraid I can’t troubleshoot CSS details, but your best friend is FireBug for testing this stuff:

    http://getfirebug.com/

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘[Resolved] How do I center the navigation bar/menu on the Twenty Eleven theme?’ is closed to new replies.
Skip to toolbar