How to change the alignment of pages in menu

• 

  collegehillrenovation · Member · Feb 9, 2012 at 3:40 am

  • Copy link
  • Add topic to favorites

  Hello there,

  I would like to align the menu in the center or left of the page, instead of to the right. This is what I have done so far and it’s not working:

  #nav li a {
  padding-top:.1em;
  color:#333;
  text-decoration:none;
  text-align:left;
  }
  
  #nav ul li a:hover,#nav ul li:hover > a,#nav ul li.current_page_item > a,#nav ul li.current_page_parent > a,#nav ul li.current_page_ancestor > a,#nav ul li.current-cat > a,#nav ul li.current-menu-ancestor > a,#nav ul li.current-menu-item > a,#nav ul li.current-menu-parent a {
  border:0;
  color:#772124;
  text-decoration:none;
  text-align:left;
  text-transform:capitalize;
  }
  
  #nav ul ul :hover > a {
  border-top:0!important;
  padding-top:4px;
  text-transform:capitalize;
  }
  
  #nav .children li,#nav .sub-menu li {
  background:#F0FFFF;
  border:1px;
  color:white;
  padding-left:4px;
  margin:0 0 0 11px;
  }
  
  #nav ul ul {
  display:none;
  position:absolute;
  top:22px;
  left:0;
  float:left;
  z-index:99999;
  padding:0;
  }
  
  #nav ul ul li {
  min-width:200px;
  text-align:left;
  border:1px;
  }
  
  #nav ul ul a {
  width:200px;
  padding-right:4px;
  }
  
  #nav ul li:hover > ul {
  display:block;
  }
  
  #nav {
  float:center;
  font-size:1.5em;
  text-transform:capitalize;
  font-weight:bold;
  text-align:center;
  font-family:"copperplate gothic light", "Trebuchet MS", "Lucida Grande", "Lucida Sans", Verdana, Arial, sans-serif;
  margin:15px 0 10px;
  }
  
  #nav ul {
  position:relative;
  text-align:center;
  padding:0 0 0 20px;
  }
  
  #nav ul li {
  position:relative;
  float:left;
  margin:0 0 0 15px;
  }
  
  #menu {
  text-transform:capitalize;
  padding-bottom:10px;
  text-align:center;
  }
  
  #menu img {
  border:2px solid #eee;
  }

  My blog address: http:collegehillrenovation.com

  The blog I need help with is: (visible only to logged in users)

• 

  collegehillrenovation · Member · Feb 9, 2012 at 3:41 am

  • Copy link

  null

• 

  collegehillrenovation · Member · Feb 9, 2012 at 3:41 am

  • Copy link

  collegehillrenovation.com

• 

  thesacredpath · Member · Feb 9, 2012 at 4:37 am

  • Copy link

  Give this a try.

  #nav {
      float: none;
  }
  
  #nav ul {
  display: inline-block;
  margin: 2px auto;
  padding: 0;
  position: relative;
  }

• 

  collegehillrenovation · Member · Feb 9, 2012 at 4:43 am

  • Copy link

  hurray! Thank you so much. That worked :)

• 

  thesacredpath · Member · Feb 9, 2012 at 4:44 am

  • Copy link

  You are welcome.