1

I'm using the Skeleton theme to create a responsive wordpress site. I'm attempting to center the top navigation but to no avail.

Here is the link: http://bit.ly/13e2tIX

This is what I'm trying:

#navigation ul li {
position: relative;
display: inline-block !important;
text-align:center;
width: 100%;
color:#666;
text-transform: uppercase;

}

But this will center and stack all of the navigational items. Any help would be greatly appreciated.

MLS1984
  • 307
  • 2
  • 6
  • 21
  • Do you want the list items to display side-by-side, in a centered UL or do you want them stacked and centered as a list? – gscharles May 07 '13 at 03:48
  • I would like them to display side by side, not in a list like the are currently. Just centered to the page. – MLS1984 May 07 '13 at 12:31

2 Answers2

1

Try this:

#navigation ul {
    text-align:center;
}
#navigation ul li {
display:inline;
list-style:none;
position: relative;
color:#666;
text-transform: uppercase;
}
#navigation ul li a {
    display:inline-block;
}

You can see the jsfiddle here: http://jsfiddle.net/sb4NH/

gscharles
  • 321
  • 2
  • 10
  • Thank you kindly for your help. It still does not seem to move the navigation. I've worked your solution into my code, its too long for the comment. This is the fiddle: http://jsfiddle.net/MLS1984/9qD9E/ – MLS1984 May 07 '13 at 14:49
  • I checked your site link and it looks right - did you figure it out? Sharp looking site design, by the way! :) – gscharles May 08 '13 at 21:02
0

This answer didn't work for me, but this did:

.menu-header
{
   display:inline-block;
}

#navigation
{
   margin:0 auto;
   text-align:center;
}

Only tested in chrome inspector, but it seems to center the navigation menu of skeleton theme for wp.

jamesdlivesinatree
  • 1,016
  • 3
  • 11
  • 36