Centering Main Menu in WP/PHP help

Cal166 · Aug 2, 2012

I'm trying to center my top menu on my website and can't seem to figure it out. Anyone can help? Willing to throw a few $ if needed.

Code:

/******************************************************************
	Main Settings
******************************************************************/

body {
	background: #000000 url(/wordpress/wp-content/theme/express/store/images/patterns/skin.png) repeat;
}



h1 {
	font-size: 24px;
}

h2 {
	font-size: 22px;
}

h3 {
	font-size: 20px;
}

h4 {
	font-size: 18px;
}

h5 {
	font-size: 16px;
}

h6 {
	font-size: 14px;
}


.container { 
	text-align: left; 
	width: 960px; 
	margin: 0 auto; 
	position: relative; 
	height: 100%; 
}

.clearfix { 
	visibility: hidden; 
	display: block; 
	font-size: 0; 
	content: " "; 
	clear: both; 
	height: 0; 
}

#wrapper {
	margin: 0 auto 50px auto;
	padding: 0 0 0 0;
	width: 1090px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
	-o-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
	-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
	background: white;
}

#header {
	border-top: 4px solid #686868;
}

#main-header{
	margin-top: 30px;
	margin-bottom: 30px;
	padding-bottom: 30px;
	border-bottom: 1px dotted #f0f0f0;
}

/******************************************************************
	Top Header Navigation Menus Settings
******************************************************************/

.left-content p.no-menu, .right-content p.no-menu {
	font-size: 11px;
	color: #c1c1c1;
	line-height: 55px;
}

.left-content p.no-menu a, .right-content p.no-menu a {
	color: #000;
	text-decoration: none;
}

.left-content {
	float:left;
}

.right-content {
	float:right;
}

#test {
	display:block;
	background: #000;
	height:50px;
}

/* General Stylings */

.top-menu li, #top-left-menu.epanel_mega li, #top-right-menu.epanel_mega li {
	display: block;
	float: left;
	margin-right: 10px;
	line-height: 53px;
}

.top-menu li a, #top-left-menu.epanel_mega li a, #top-right-menu.epanel_mega li a {
	color: #c1c1c1;
	font-size: 13px;
	text-transform: uppercase;
	text-decoration: none;
	text-shadow: none;
}

.top-menu li a:hover, #top-left-menu.epanel_mega li a:hover, #top-right-menu.epanel_mega li a:hover {
	color: #878787;
}

.custom-left-content {
	line-height:53px;
	color:#c1c1c1;
	font-size:12px;
}



/*-----------------------------------------------------------------------------------*/
/*	Navigation & Menus
/*-----------------------------------------------------------------------------------*/


#main-menu-wrapper {
	position: absolute;
	right: 0px;
	top: 15px;
}


#main-menu, #main-menu *, #store-home-menu, #store-home-menu * {
	margin:			0;
	padding:		0;
	list-style:		none;
}
#main-menu, #store-home-menu {
	line-height:	1.0;
}
#main-menu ul, #store-home-menu ul {
	position:		absolute;
	top:			-999em;
	width:			10em; /* left offset of submenus need to match (see below) */
}
#main-menu ul li, #store-home-menu ul li {
	width:			100%;
}
#main-menu li:hover, #store-home-menu li:hover {
	visibility:		inherit; /* fixes IE7 'sticky bug' */
}
#main-menu li, #store-home-menu li {
	float:			left;
	position:		relative;
}
#main-menu a, #store-home-menu a {
	display:		block;
	position:		relative;
}
#main-menu li:hover ul,
#main-menu li.sfHover ul, #store-home-menu li:hover ul, #store-home-menu li.sfHover ul {
	left:			0;
	top:			2.5em; /* match top ul list item height */
	z-index:		99;
}
ul#main-menu li:hover li ul, #store-home-menu li:hover li ul, #store-home-menu li.sfHover li ul,
ul#main-menu li.sfHover li ul {
	top:			-999em;
}
ul#main-menu li li:hover ul, #store-home-menu li li:hover ul, #store-home-menu li li.sfHover ul
ul#main-menu li li.sfHover ul {
	left:			10em; /* match ul width */
	top:			0;
}
ul#main-menu li li:hover li ul, #store-home-menu li li:hover li ul, #store-home-menu li li.sfHover li ul,
ul#main-menu li li.sfHover li ul {
	top:			-999em;
}
ul#main-menu li li li:hover ul, #store-home-menu li li li:hover ul, #store-home-menu li li li.sfHover ul,
ul#main-menu li li li.sfHover ul {
	left:			10em; /* match ul width */
	top:			0;
}

/*-----------------------------------------------------------------------------------*/
/*	Menu Skin
/*-----------------------------------------------------------------------------------*/

#main-menu-wrapper ul {
	margin: 0;
	padding: 0;
	list-style: none;
	line-height: 35px;
}

#main-menu-wrapper ul a, #store-home-wrapper ul a {
	display: block;
	position: relative;
}

#main-menu-wrapper ul li, #store-home-wrapper ul li {
	float: left;
	position: relative;
	z-index: 40;
}

#main-menu-wrapper ul li:hover, #store-home-wrapper ul li:hover { visibility: inherit; /* fixes IE7 'sticky bug' */ }

#main-menu-wrapper ul ul, #store-home-wrapper ul ul {
	position: absolute;
	top: -9999em;
	width: 150px; /* left offset of submenus need to match (see below) */
}

#main-menu-wrapper ul ul li, #store-home-wrapper ul ul li { width: 100%; }

/*  Make sub menus appear */
#main-menu-wrapper ul li:hover ul, #store-home-wrapper ul li:hover ul, #store-home-wrapper ul li.sfHover ul, 
#main-menu-wrapper ul li.sfHover ul {
	left: -1px;
	top: 36px; /* match top ul list item height */
	z-index: 99;
}

/* Hide all subs subs (4 levels deep) */
#main-menu-wrapper ul li:hover li ul,
#main-menu-wrapper ul li.sfHover li ul,
#main-menu-wrapper ul li li:hover li ul,
#main-menu-wrapper ul li li.sfHover li ul,
#main-menu-wrapper ul li li li:hover li ul,
#main-menu-wrapper ul li li li.sfHover li ul,
#store-home-wrapper ul li:hover li ul,
#store-home-wrapper ul li.sfHover li ul,
#store-home-wrapper ul li li:hover li ul,
#store-home-wrapper ul li li.sfHover li ul,
#store-home-wrapper ul li li li:hover li ul,
#store-home-wrapper ul li li li.sfHover li ul { top: -9999em; }

/* Displays all subs subs (4 levels deep) */
#main-menu-wrapper ul li li:hover ul,
#main-menu-wrapper ul li li.sfHover ul,
#main-menu-wrapper ul li li li:hover ul,
#main-menu-wrapper ul li li li.sfHover ul,
#main-menu-wrapper ul li li li li:hover ul,
#main-menu-wrapper ul li li li li.sfHover ul,
#store-home-wrapper ul li li:hover ul,
#store-home-wrapper ul li li.sfHover ul,
#store-home-wrapper ul li li li:hover ul,
#store-home-wrapper ul li li li.sfHover ul,
#store-home-wrapper ul li li li li:hover ul,
#store-home-wrapper ul li li li li.sfHover ul {
	left: 180px; /* match .nav ul width */
	top: -1px;
}
	
/* top level skin */
#main-menu-wrapper ul a, #store-home-wrapper ul a {
	padding: 0 15px;
	color: #000000;
	font-size: 14px;
	font-weight: bold;
	text-decoration: none;
}

#main-menu-wrapper > ul > li > a, #store-home-wrapper > ul > li > a {
	text-transform: uppercase;
	font-weight: normal;
}


#main-menu-wrapper ul li a:hover,
#main-menu-wrapper ul li:hover,
#main-menu-wrapper ul li.sfHover a,
#main-menu-wrapper ul li.current-cat a,
#main-menu-wrapper ul li.current_page_item a,
#main-menu-wrapper ul li.current-menu-item a,
#store-home-wrapper ul li a:hover,
#store-home-wrapper ul li:hover,
#store-home-wrapper ul li.sfHover a,
#store-home-wrapper ul li.current-cat a,
#store-home-wrapper ul li.current_page_item a,
#store-home-wrapper ul li.current-menu-item a {
	text-decoration: none;
	color: #ff9900 !important;
}

/* 2nd level skin */
#main-menu-wrapper ul ul, #store-home-wrapper ul ul {
	padding: 10px 15px 10px 15px;
	margin: 10px 0 0 0;
	background: #fff;
	border: 1px solid #e0e0e0;
	-webkit-border-radius: 3px;
	   -moz-border-radius: 3px;
	   		border-radius: 3px;
	-webkit-box-shadow:0 0 4px rgba(0, 0, 0, 0.1);
	   -moz-box-shadow:0 0 4px rgba(0, 0, 0, 0.1);
    		box-shadow:0 0 4px rgba(0, 0, 0, 0.1);
}

#main-menu-wrapper ul ul li, #store-home-wrapper ul ul li {
	height: 35px;
	line-height: 35px;
	float: none;
	background: none;
	border-bottom: 1px solid #f0f0f0;
}

#main-menu-wrapper ul ul li:last-child, #store-home-wrapper ul ul li:last-child {	border-bottom: none; }

#main-menu-wrapper ul ul li a, #store-home-wrapper ul ul li a {
	line-height: 35px;
	height: 35px;
	font-size: 12px;
	padding:0;
	font-weight: normal;
}

#main-menu-wrapper ul li.sfHover ul a, #store-home-wrapper ul li.sfHover ul a { color: #999!important; }

#main-menu-wrapper ul li.sfHover ul a:hover, #store-home-wrapper ul li.sfHover ul a:hover { color: #444!important; }

douglasb · Aug 2, 2012

Have you tried placing it in a DIV, then aligning that DIV to center?

Akhen · Aug 13, 2012

It would be easier to help you if we had the html or the exact example. If anything you either need to wrap it in the container or perhaps add auto to the left and right margins to auto center it.

beginner99 · Aug 14, 2012

Resolution independent centering in general can be achieved with

Code:

margin-left:auto;
margin-right:auto;

Leros · Aug 14, 2012

beginner99 said:
Resolution independent centering in general can be achieved with

Code:

margin-left:auto; margin-right:auto;

This is the right answer. If it doesn't work, you need to look at the surrounding element.

serp · Aug 14, 2012

If you are still interested in it working in the likes of IE5 then add text-align: center; to it's container as well the above mentioned auto margins. If the auto margin isn't working in all newer browsers make sure you set the correct DOCTYPE.

0___________0 · Aug 15, 2012

beginner99 said:
Resolution independent centering in general can be achieved with

Code:

margin-left:auto; margin-right:auto;

I think I've also seen:

Code:

margin: 0 auto;

What is the difference between them?

beginner99 · Aug 15, 2012

0___________0 said:
I think I've also seen:

Code:

margin: 0 auto;

What is the difference between them?

nothing really. 0 is for top and bottom and auto for left and right.

Search

Centering Main Menu in WP/PHP help

Cal166

Diamond Member

douglasb

Diamond Member

Akhen

Golden Member

beginner99

Diamond Member

Leros

Lifer

serp

Member

0___________0

Senior member

beginner99

Diamond Member

TRENDING THREADS