megwoo
8/2/2015 - 7:06 AM

Magento navigation for centering nav items equidistant/equally across 100% width

Magento navigation for centering nav items equidistant/equally across 100% width

! important ! carriage returns make a differnce and need to be used after each "li"

  // navigation
		#header-nav {
			border: none;
			height: 49px;
			line-height: 49px;
			
			.nav-primary {
				margin: 0 $trim;
				text-align: justify;
				font-size: 0.1px;
				height: 49px;
				line-height: 49px;
				
				&:after {
					content: '';
					width: 100%;
					display: inline-block;
				}
				
				li.level0 {
					display: inline-block;
					line-height: 49px;
				
					a.level0 {				
						padding: 0;
						line-height: 49px;
					}
				}
			}
		} // end navigation
		

#container {
  height: 125px;
  text-align: justify;
  border: 10px solid black;
  font-size: 0.1px; /* IE 9/10 don't like font-size: 0; */
  min-width: 600px;
}
#container div {
  width: 150px;
  height: 125px;
  display: inline-block;
  background: red;
}
#container:after {
  content: '';
  width: 100%; /* Ensures there are at least 2 lines of text, so justification works */
  display: inline-block;
}