Center align secondary navigation menu

[Peter]

Hello,

I've moved my secondary navigation menu to "before footer". Now I just have to center align it. I've tried a bunch of things but nothing seems to work. I can get it to the right, and to the left. But can't seem to center align it.

Can anyone tell me how to do this? Would be great. Below is the navigation section of the style.css

/* Header / Primary / Secondary Navigation
------------------------------------------------------------ */

.menu-primary,
.menu-secondary {
	clear: both;
	color: #222;
	margin: 0 auto;
	overflow: hidden;
	width: 100%;
}

#header .menu {
	float: right;
    background: url(images/gray-texture.jpg);
    font-family: "Droid Sans","Lucida Grande",Tahoma,sans-serif;
    text-transform: uppercase;
	border-top: 1px solid #ddd;
    border-right: 1px solid #ddd;
    border-left: 1px solid #ddd;
}

.menu-primary,
.menu-secondary {
	background: 
}

.menu-primary,
.menu-secondary {
	float: left;
	margin: 0 0 20px;
}

.menu-primary ul,
.menu-secondary ul {
	
	width: 100%;
}

.menu-primary li,
.menu-secondary li,
#header .menu li {
	float: right;
	list-style-type: none;
}

.menu-primary a,
.menu-secondary a,
#header .menu a {
	color: #222;
	display: block;
	padding: 6px 15px 5px;
	position: relative;
	text-decoration: none;
}

.menu-primary li a:active,
.menu-primary li a:hover,
.menu-primary .current_page_item a,
.menu-primary .current-cat a,
.menu-primary .current-menu-item a,
.menu-secondary li a:active,
.menu-secondary li a:hover,
.menu-secondary .current_page_item a,
.menu-secondary .current-cat a,
.menu-secondary .current-menu-item a,
#header .menu li a:active,
#header .menu li a:hover,
#header .menu .current_page_item a,
#header .menu .current-cat a,
#header .menu .current-menu-item a {
    background-color: #fff;
}

.menu-primary li li a,
.menu-primary li li a:link,
.menu-primary li li a:visited,
.menu-secondary li li a,
.menu-secondary li li a:link,
.menu-secondary li li a:visited,
#header .menu li li a,
#header .menu li li a:link,
#header .menu li li a:visited {
	background-color: #f5f5f5;
	border-bottom: 1px solid #ddd;
	border-top: 1px solid #fff;
	color: #222;
	font-size: 14px;
	padding: 10px 15px;
	position: relative;
	text-align: left;
	text-shadow: #fff 1px 1px;
	text-transform: none;
	width: 138px;
}

.menu-primary li li a:active,
.menu-primary li li a:hover,
.menu-secondary li li a:active,
.menu-secondary li li a:hover,
#header .menu li li a:active,
#header .menu li li a:hover {
	color: #d05353;
}

.menu-primary li ul,
.menu-secondary li ul,
#header .menu li ul {
	-moz-box-shadow: 0px 1px 3px #ccc;
	-webkit-box-shadow: 0px 1px 3px #ccc;
	box-shadow: 0px 1px 3px #ccc;
	height: auto;
	left: -9999px;
	margin: 0 0 0 1px;
	position: absolute;
	width: 168px;
	z-index: 9999;
}

.menu-primary li ul a,
.menu-secondary li ul a,
#header .menu li ul a {
	width: 130px;
}

.menu-primary li ul ul,
.menu-secondary li ul ul,
#header .menu li ul ul {
	margin: -44px 0 0 168px;
}

.menu li:hover ul ul,
.menu li.sfHover ul ul {
	left: -9999px;
}

.menu li:hover,
.menu li.sfHover {
	position: static;
}

ul.menu li:hover>ul,
ul.menu li.sfHover ul,
#header .menu li:hover>ul,
#header .menu li.sfHover ul {
	left: auto;
}

.menu-primary li a.sf-with-ul,
.menu-secondary li a.sf-with-ul,
#header .menu li a.sf-with-ul {
	padding-right: 25px;
}

.menu li a .sf-sub-indicator,
.menu li li a .sf-sub-indicator,
.menu li li li a .sf-sub-indicator {
	background: url(images/arrow-down.png) no-repeat;
	height: 16px;
	position: absolute;
	right: 0px;
	text-indent: -9999px;
	top: 17px;
	width: 16px;
}

li:hover ul ul,
li.sfHover ul ul {
	left: -9999px;
}

li:hover,
li.sfHover {
	position: static;
}

#wpadminbar li:hover ul ul {
	left: 0;
}

/* Primary Navigation Extras
------------------------------------------------------------ */

.menu li.right {
	float: right;
	padding: 6px 15px 5px;
}

.menu li.right a {
	background: none;
	border: none;
	color: #222;
	display: inline;
	text-decoration: none;
}

.menu li.right a:hover {
	color: #d05353;
	text-decoration: none;
}

.menu li.search {
	padding: 0 10px;
}

.menu li.rss a {
	background: url(images/rss.png) no-repeat center left;
	margin: 0 0 0 10px;
	padding: 0 0 0 16px;
}

.menu li.twitter a {
	background: url(images/twitter-nav.png) no-repeat center left;
	padding: 0 0 0 20px;
}

Cheers,

Peter.

http://beyourselfsocially.com

[blogger boutique]

What code did you use to reposition the secondary navigation? For some reason, it won't even let me inspect it. Maybe try using code from this link, and changing your hook?
http://briangardner.com/code/navigation-menus/#reposition-secondary

Genesis Visual Hook Guide

Let me know if that is what you followed, and I'll try to troubleshoot getting it aligned for you.

[Peter]

Thanks for your reply.

I have no idea why it won't let you inspect the code. But that's the code I used to reposition the navigation menu.

I tried changing the hook but that doesn't change much.

[Peter]

Anyone else want to chime in?

I've been trying out some other things I've found on the forum but it's not working.

Cheers,

Peter.

[Peter]

I got this figured out by starting another forum thread.

to center that menu, add a text align center to the subnav

#subnav {
  text-align: center;
}

then remove the float: right on the menu items and add a display: inline-block instead

#subnav .genesis-nav-menu li {
  display: inline-block;
  float: none;
}

Many Thanks to Jamie Mitchell from http://www.jamiemitchelldesign.com.au

[Author]

Posts