How to Center Navigation Menu WordPress Twenty Twelve Theme


This video is a follow-up video to my extensive tutorial that walks you through the process step-by-step from the very beginning to create your own website from start to finish found here:

In this video, I show you how to center the navigation menu on the page with the WordPress Twenty Twelve theme. By default, the navigation menu appears to the far left of the screen but you can position it to appear in the center or to the right of the screen.







27 responses to “How to Center Navigation Menu WordPress Twenty Twelve Theme”

  1. Fawzia Begum Avatar

    You teach well. Thanks so much.

  2. Percy Tienhooven Avatar

    Thanks bro! Founded what i needed to know. CHEERS!

  3. kimuk123 Avatar

    Thanks, this has been driving me crazy!

  4. Lucas Bona Avatar

    saved my life!

  5. Elle Casey Avatar

    big help, thanks!

  6. Miguel Ángel Avatar

    Hi! Excelen video, i need help urgently. I have a template on wordpress, the logo is on the header, right alignment, i need put it on the left, the problem is, left i have the menu and i don't know how to invert both components.

    I really appreciate your answer, congratulations!

  7. Jacquelin Powers Avatar

    His voice is kinda hot, just saying

  8. Jerome Cabaluna Avatar

    Hi I would like to ask do you have a tutorial about wordpress wherein you could make 3 videopage and the other 2 is like coming soon page? Thanks

  9. Roxy Sirghi Avatar

    For the longest time I was trying to figure out how to center the darn header. Thank you so much for this!!!

  10. Martin Hamilton Avatar

    Would the changes be lost when the theme is updated? I think we need to make a child theme, make changes in that, and activate the child theme. What is your take on that? I like your videos.

  11. Nicholas Albright Avatar

    I'm wanting to keep the menu fixed, does anyone know where I can go to get this.

  12. Skopelos Avatar

    Very helpful man…thanks…especially the part where you use the "find" function to locate the piece of code….God…that saved me hours of scrolling and having my eyes water from code searching…THANK YOU….:-)

  13. Art Zoerman Avatar

    Hey mate, thanks to your videos it was easy to find stuff out 🙂

    I only have a question or maybe even a – request for a video –

    could you explain how to add a logo to the website? Like the little logo you can see left of the website on the – new tab you open like it has the word F on facebook or G on Google?

    Thanks, Yours Art.

  14. Bibi Henderson RN BSN Avatar

    how do I edit the wordpress 2011 theme header php file

  15. Robin Malone Avatar

    Unfortunately this doesn't work on all child themes. I've been trying to center the "Just Pink" them for days now, have went through at least 50 different tutorials/forum comments and nothing works on mine. See…it's done. I've used firebug and google. It moves it a hair and that's it. 🙁
    main-navigation ul.nav-menu,
    .main-navigation div.nav-menu > ul {
    display: inline-block !important;
    text-align: center;
    width: 100%;

  16. Gabriel Lota Avatar

    Hi Sculptor your tuttorials are really amazing, i am new at this and i am using the child theme of twenty twelve, how do i edit the in the child theme? thanks.

  17. wpSculptor Avatar

    Haha thanks Tony!

  18. wpSculptor Avatar

    Thanks!… Try adding : background-color: #955245;

    underneath: .main-navigation li a {

    in the same CSS file. You can change the 6 digits to the hex code of whichever color you choose. Good luck!

  19. wpSculptor Avatar

    in the same CSS File under: "/* Navigation Menu */" After, "text-align: center;" add in:

    font-family: Georgia;

    You can change Georgia to any other web safe font. Just google "web safe fonts" for options.

  20. wpSculptor Avatar

    Thanks Steve! I know you can also use the standard installation of Google Chrome to inspect elements but I much prefer firefox/firebug.

  21. Tony Salmon Avatar

    Keep up the work i am using you to make my website LOL

  22. Francesco Romano Avatar

    Your videos are clear and AMAZING!!! Thank you! Do you know how to change the navigation bar color? So far I was able to change only the borders..

    Thank you again

  23. Rajib Kirtania Avatar

    thanx for the video. i have done it. Can u show the steps needed to change the menu would a great help.

  24. Rajib Kirtania Avatar

    cant see anything what are doing in the video.

  25. Steve Healey Avatar

    can the inspect element only be done with firebug in firefox.
    I have been trying to find out how to move some header text in a wordpress template to the centre but gave up looking for it in the css file.
    BTW – great tutorial

Leave a Reply

Your email address will not be published. Required fields are marked *