This allows you to justify your menu list perfectly. It's responsive. It doesn't work on Joomla! for some crazy mystery, please help if you know why!!
A Pen by Faye Polson on CodePen.
<!DOCTYPE html> | |
<head> | |
<title>Justify Test</title> | |
<meta charset="UTF-8"> | |
</head> | |
<body> | |
<div class="container"> | |
<nav class="nav-justify"> | |
<ul> | |
<li><a href="#">Link1</a></li> | |
<li><a href="#">Link2</a></li> | |
<li><a href="#">Link3</a></li> | |
<li><a href="#">Link4</a></li> | |
<li><a href="#">Link5</a></li> | |
</ul> | |
</nav> | |
</div> | |
</body> |
body { | |
background:#eee; | |
} | |
.container { | |
background:white; | |
max-width:500px; | |
margin:0 auto; | |
} | |
.nav-justify ul { | |
list-style: none; | |
margin:0px; | |
padding:0px; | |
text-align:justify; | |
&:after { | |
content:" "; | |
display:inline-block; | |
width:100%; | |
height:0; | |
} | |
li { | |
display:inline-block; | |
} | |
} | |