#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2013
    Posts
    1
    Rep 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 04:24 PM. Reason: reformatted the code

IMN logo majestic logo threadwatch logo seochat tools logo