Is there a way to indent the wrapped lines of text in an unordered list? The current layout is not quite what I want, as shown in the first image below. Ideally, I would like it to look more like the second image.
I attempted to use margin-left: 56px; and text-indent: -56px; on the header, but the results were unexpected and not ideal.
Feel free to experiment with the code using this fiddle: https://jsfiddle.net/twestfall/n2Ln9hfp/
HTML:
<header class="l-index-header">
<ul class="category-nav">
<li> <a href="http://test2.spinneybeck.com/index.php?/architectural-products">All</a>
</li>
<li> <a href="http://test2.spinneybeck.com/index.php?/products/categories/category/belting-leather-wall-tiles">Belting Leather + Wall Tiles</a>
</li>
<li> <a href="http://test2.spinneybeck.com/index.php?/products/categories/category/handrails">Handrails</a>
</li>
<li> <a href="http://test2.spinneybeck.com/index.php?/products/categories/category/magnetic-backed-leather">Magnetic Backed Leather</a>
</li>
<li> <a href="http://test2.spinneybeck.com/index.php?/products/categories/category/pulls">Pulls</a>
</li>
<li> <a href="http://test2.spinneybeck.com/index.php?/products/categories/category/rugs">Rugs</a>
</li>
<li> <a href="http://test2.spinneybeck.com/index.php?/products/categories/category/floor-tiles" class="is-current">Floor Tiles</a>
</li>
<li> <a href="http://test2.spinneybeck.com/index.php?/products/categories/category/screens">Screens</a>
</li>
<li> <a href="http://test2.spinneybeck.com/index.php?/products/categories/category/wall-panels">Wall Panels</a>
</li>
<li> <a href="http://test2.spinneybeck.com/index.php?/products/categories/category/custom">Custom</a>
</li>
</ul>
</header>
CSS:
.l-index-header {
*zoom: 1;
max-width: 50.5em;
padding-left: 0;
padding-right: 0;
margin-right: auto;
}
.category-nav li {
display: inline-block;
}
.category-nav a {
font-family: HelveticaNeueLT-Medium, Helvetica, Arial, sans-serif;
font-size: 13px;
font-size: 1.3rem;
line-height: 1.5;
color: #acadaf;
text-decoration: none;
padding: 0 0.8em;
display: inline-block;
-webkit-font-smoothing: antialiased;
}
.category-nav li:first-of-type a {
border-right: 1px solid #929496;
padding-right: 1.2em;
margin-right: 0.2em;
}
.category-nav a:hover {
color: #2f292a;
background-color: #e6e7e8;
}
.category-nav a.is-current {
color: #2F292A;
}