[resolved] How do I center the navigation bar/menu on the Twenty Eleven theme? (9 posts)

  1. blahblahbecky
    Posted 4 years ago #

    I cannot figure out how to centre the text on navigation bar underneath my header image - can anyone tell me what the html is and where it needs to go?

    My site is http://www.blahblahbecky.co.uk


  2. esmi
    Forum Moderator
    Posted 4 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. Bozz
    Posted 4 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!

  4. boriskamp1991
    Posted 4 years ago #

    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!!

  5. Bozz
    Posted 4 years ago #

    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.

  6. boriskamp1991
    Posted 4 years ago #

    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; }

    #access { text-align:left; }

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

    thank you very much!

  7. boriskamp1991
    Posted 4 years ago #

    no answer??

  8. Verndroid
    Posted 4 years ago #


    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? :)

  9. Bozz
    Posted 4 years ago #

    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:


Topic Closed

This topic has been closed to new replies.

About this Topic