• Locked
2 replies [Last post]
Fri, 2013-01-11 15:46
Design Locker
Design Locker's picture
Offline
newbie
Ireland
Last seen: 10 years 21 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

Top
Tags:
Sat, 2013-01-12 01:01
#1
Captain_Aizen
Captain_Aizen's picture
Offline
newbie
Los Angeles, CA
Last seen: 10 years 20 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

Top
Sat, 2013-01-12 01:32
#2
gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 2 years 13 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

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.

Top
  • Locked