Support » Themes and Templates » Twenty twelve centred menu

  • I centred the menu and title and it seems to work pretty well, except it brakes on iPhone and when using small window-sizes. The “Menu” then button folds under the menu when expanded. Why’s that?

    To center the nav I used:

    .main-navigation {
    	position: relative;
    .main-navigation div {
    	display: inline-block;
    	margin: 0 auto;
    	margin-right: 0px;
    .main-navigation ul.nav-menu,
    .main-navigation div.nav-menu > ul {
    border: 0 !important;

    And to center the headers i simply used ‘text-align: center;’

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


    Forum Moderator

    Do not edit the Twenty Twelve theme. It will be the default theme in WordPress 3.5 and having access to an unedited version of the theme is vital when dealing with a range of site issues. First create a child theme for your changes.

    Hi Esmi, thanks for the input. All my changes are already made as a child theme to Twenty Twelve but that doesn’t really help me solve this problem.



    Forum Moderator

    You’d need to post a link to your site for someone to look at your actual code live.

    Sure, it’s under construction. I’m more of a designer then a coder so have mercy on me.

    It looks pretty much the way I want it to in fullsized browsers but it’s the scaling that fails. Things seem to get out of place.

    I have commented my changes in the child theme to keep up with what i’m trying to accomplish, it’s a bit of a mess with all the !important tags here and there, but i’ll sort that out later on. 😉


    I’m looking for the code in the styles.css and I see it but I put the changes in and it didn’t work. Can you guys help me center the menu.



    Moderator Andrew Nevins


    Forum moderator

    Hi Joel.

    In your Child Theme or Custom CSS Manager plugin, enter this;

    .main-navigation ul.nav-menu {
     text-align: center;

    Thank you Thank you very much

    How how do I avoid my drop downs from being centered?

    Its not centering for me

    The key to understanding how to centre the twentytwelve main menu is to realise that the width of the .main-navigation ul.nav-menu is set to 100%

    If you set the width to 80% it will centre itself. You can reduce ul margins to get more nav options on the same line.

    then move the top and bottom border from .main-navigation ul.nav-menu to .main-navigation which will align the nice grey pencil line top and bottom.

    at least it worked for me. wordpress is awesome

    Obviously as esmi says, edit a child theme not the actual 2012 theme.

    kind regards,

    In order to center the main menu and left justify the submenus, add the following to your child theme’s style.css:

    .main-navigation ul.nav-menu {
        text-align: center;
    .main-navigation li ul li a {
        text-align: left;
Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘Twenty twelve centred menu’ is closed to new replies.