2 replies [Last post]
Design Locker
Design Locker's picture
Offline
newbie
Ireland
Last seen: 6 years 44 weeks ago
Ireland
Joined: 2013-01-11
Posts: 1
Points: 2

Hi All,

The main navigation menu on wordpress twenty twelve theme is left aligned by default.

I am trying to center align the menu on my child theme but just cannot figure it out. The "li" items currently align left and I want them to align center within the main nav bar. Any suggestions?

Site is http://www.inmotionphysio.ie/wip

Captain_Aizen
Captain_Aizen's picture
Offline
newbie
Los Angeles, CA
Last seen: 6 years 44 weeks ago
Los Angeles, CA
Timezone: GMT-8
Joined: 2013-01-01
Posts: 9
Points: 11

Here's a method you could use

Here's a method you could use to move it the center by force. You see this part of the css:

}
.main-navigation ul.nav-menu {
    background: none repeat scroll 0 0 #F0942C;
    border: 0 none;
    padding: 0 0 0 10px;
}

It centers it if you put a padding of 200px

}
.main-navigation ul.nav-menu {
    background: none repeat scroll 0 0 #F0942C;
    border: 0 none;
    padding: 0 0 0 200px;
}

I know it works because I just did it to your menu using the Firebug plugin in firefox

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 day 15 hours ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9743
Points: 3822

Since the li elements are

Since the li elements are inline-block, I'd simply set the ul to {text-align: center}, e.g.

.main-navigation ul.nav-menu {
    background: none repeat scroll 0 0 #F0942C;
    border: 0 none;
    padding: 0 0 0 10px;
    text-align: center;
    }

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.