Nav Menu alignment problem

Dev Shed Forums Sponsor:

January 23rd, 2013, 04:57 AM

flotilla

Registered User

Join Date: Jan 2013

Posts: 1

Time spent in forums: 7 m 25 sec
Reputation Power: 0

Nav Menu alignment problem

Hi,
I have a navigation menu in my header on my wordpress site. I am using someone elses theme and I am trying to work out how to centre the menu. It keeps aligning to the left of the screen.

I was wondering if someone can indicate to me where and what in my code I need to put in there to centre the menu.

The code is taken from my css file for the theme

Code:

/* header --------------------------------------------------*/
#header {
  margin-right: auto;
  margin-left: auto;
  padding-top: 85px;
  position: relative;
  width: 960px;
  height: 170px;
}

#header h1 a {
  color: #000;
  font-size: 85px;
  font-family: exo, sans-serif;
  font-style: italic;
  font-weight: 100;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: -15px;
  padding-right: 28px;
}

#header h1 a:hover {
  color: #aa9977;
  text-decoration: none;
}

#logotopend {
  max-width: 730px;
  max-height: 125px;
  float: center;
  overflow: hidden;
}

#logotopper {
  background-image: url(images/logo-colour-bars.png);
  background-repeat: no-repeat;
  background-position: 0 0px;
  display: block;
  padding-top: 40px;
  width: 19px;
  height: 51px;
  float: left;
}

.social {
  padding-top: 30px;
  width: 160px;
  float: right;
}

.social-icon-fbk a {
  background-image: url(images/social-logos-sprite.png);
  background-repeat: no-repeat;
  background-position: 0 0;
  display: block;
  width: 34px;
  height: 35px;
  float: right;
  overflow: hidden;
}

.social-icon-fbk a:hover { background-position: 0 -35px;}

.social-icon-twt a {
  background-image: url(images/social-logos-sprite.png);
  background-repeat: no-repeat;
  background-position: -34px 0;
  display: block;
  margin-left: 2px;
  width: 34px;
  height: 35px;
  float: right;
  overflow: hidden;
}

.social-icon-twt a:hover { background-position: -34px -35px;}

.social-icon-rss a {
  background-image: url(images/social-logos-sprite.png);
  background-repeat: no-repeat;
  background-position: -85px 0;
  display: block;
  margin-left: 19px;
  width: 34px;
  height: 35px;
  float: right;
  overflow: hidden;
}

.social-icon-rss a:hover { background-position: -85px -35px;}

#tagline {
  color: #aa9977;
  font-size: 105%;
  font-weight: 500;
  text-transform: uppercase;
  margin-top: -15px;
  clear: left;
}

#nav {
  margin-right: auto;
  margin-left: auto;
  width: 990px;
  height: 60px;
  padding-top: 30px;
  padding-bottom: 2px;
  border-bottom: 1px solid #fff;
}

#nav li {
  list-style: none;
  margin-bottom: 30px;
}

#nav li a {
  color: #fff;
  font-size: 150%;
  font-weight: 450;
  text-transform: uppercase;
  z-index: 999;
}

#nav li a:hover {
  color: #fff;
  text-decoration: none;
  z-index: 999;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
  filter: alpha(opacity=80);
}

#nav .parent > a,
#nav .parent > a:hover {
  background: #fff;
  background-position: right;
  background-repeat: no-repeat;
  z-index: 999;
}

#nav ul,
#nav ul li {
  display: inline;
  list-style: none;
  padding: 0;
  margin: 0;
}

#nav ul li a {
  display: inline-block;
  text-decoration: none;
  padding: 0px 0px 0px 0px;
  z-index: 999;
}

#nav ul li a:hover {

}

#nav ul #first a:hover {
  border-radius: 5px 0 0 5px;
  z-index: 999;
}

#nav ul li { position: relative;}

#nav li ul {
  display: none;
  position: absolute;
  top: 51px;
  left: 11px;
  z-index: 999;
}

#nav li ul a {
  z-index: 999;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
  filter: alpha(opacity=80);
  opacity: .8;
}

#nav ul ul li:hover ul,
#nav ul ul ul li:hover ul { left: 0;}

#nav ul li:hover ul { display: inline-block;}

#nav ul ul,
#nav ul li:hover ul ul,
#nav ul ul li:hover ul ul {
  }

#nav ul ul ul li { margin-top: -14px;}

#nav ul li:hover ul,
#nav ul ul li:hover ul,
#nav ul ul ul li:hover ul {
  display: block;
  z-index: 999;
}

#nav ul li:hover ul li a,
#nav ul ul li:hover ul li a,
#nav ul ul ul li:hover ul li a { margin: -1px 0 0 -11px;}

#nav ul li:hover ul li a {
  padding: 5px 14px 15px;
  width: 150px;
}

#nav ul ul li:hover ul li a {

}

#nav ul ul ul li:hover ul li a {
  width: 140px;
  padding: 0 14px 0 24px;
}

#nav .children li a:hover {
  color: #fff;
  background-image: none;
}

Last edited by Kravvitz : January 23rd, 2013 at 03:24 PM. Reason: reformatted the code

Nav Menu alignment problem

Developer Shed Advertisers and Affiliates