Question

I’d like to have my navigation menu on my site span the width evenly. Here is an example of what I’m trying to accomplish, notice how the links are spaced evenly and stretch the entire width of the navigation bar.

I’m not exactly sure what code to use to accomplish this. I tried margin:auto but that didn’t seem to work.

Here is the CSS that I have:

.mainNav{ 
  height:30px; 
  padding-bottom:0px; 
  margin:0 !important;
  position: relative; 
  border-top: 1px #d5d5d5 solid;
  border-bottom: 1px #d5d5d5 solid;
}
.mainNav a { 
  font-size:16px; 
  -webkit-transition:none; 
  -moz-transition:none; 
  -o-transition:none; 
  transition:none;
  position: relative;              
}   
.mainNav ul { 
  list-style-type: none; 
  list-style-image: none; 
}
.mainNav li {
  float:left;                   
  margin: 0 auto;
  position: relative; 
  list-style-type: none; 
  list-style-image: none; 
}   
.mainNav li a { 
  text-transform:uppercase; 
  padding:0 0 0 36px; 
  display:block; 
  padding-bottom:13px;  
}
.mainNav li ul { 
  display: none; 
  margin:0 !important; 
}
.mainNav li:hover > ul, .mainNav li.hover > ul { 
  display: block; 
  position: absolute; 
  top: 35px; 
  left: 0; 
  z-index: 1000; 
  width: 180px; 
}
.mainNav li  > ul { 
  height:auto;  
  width: auto; 
  background: #fff; 
  border:1px solid #efefef; 
  padding:0; 
}
.mainNav li  > ul li {  
  width:180px; 
  padding: 0; 
  position: relative; 
  height:35px; 
  border-bottom:1px solid #efefef; 
}   
.mainNav li  > ul li:last-child{  
  border-bottom:none; 
}
.mainNav li  > ul li a { 
  text-transform:none; 
  height:22px; 
  padding: 5px 10px 0px 15px; 
  text-align: left;  
  font-size: 13px; 
  line-height:25px; 
  color:#333; 
}
.mainNav li  > ul li a:hover { 
  border:none; 
}
.mainNav li ul li:hover > ul, .mainNav li ul li.hover > ul { 
  display: block; 
  position: absolute; 
  top:0; 
  left: 180px; 
  z-index: 0; 
  width: 180px; 
}

Answer 1

If you turn off javascript and reload that wordpress theme that you want to replicate, you’ll notice that the styling breaks.

That is because the margin’s set on the list items to space them out evenly, is calculated using javascript and then applied.

You could write a javascript solution to style your list items or a quick fix would be to hard code the widths of the list items, e.g:

Change your current block of CSS:

.mainNav li a { 
  text-transform:uppercase; 
  padding:0 0 0 36px; 
  display:block; 
  padding-bottom:13px;  
}

To the following:

.mainNav li a { 
  text-transform:uppercase; 
  text-align: center; /*added*/
  width: 117px; /*added*/
  padding:0; /*edited*/
  display:block; 
  /*padding-bottom:13px;*/ /*removed*/
}