using nav-tabs as step element twitter bootstrap - html

Question

I've done some sort of reverse engineering to make the nav-tabs component in Bootstrap to work as a step element. This is similiar to the step element used in semantic UI
Now, I managed to get this far (overriding the nav-tabs CSS and adding the styles for the arrows) but there are some issues I cannot figure out
I don't know how to space the text out nicely, especially starting from the 2nd step text. I change the padding/margin of the arrows but it messes the positioning of the others (or that also needs to be tweaked)
When you hover over the anchor tag its fine. but then, when an element is active, and you hover over just the arrow (the triangle sort of), that gets highlighted whereas it should highlight the entire previous step element that can be clickable (if you get the gist of how it needs to be in a step wizard sort-of)
Any tips on this? it's some pseudo class setting i'm missing or repeating somewhere!
.nav-steps>.step:after {
position: absolute;
z-index: 2;
content:'';
top: 0em;
right: -22px;
border-bottom: 23px solid transparent;
border-left: 23px solid orange;
border-top: 24px solid transparent;
}
.nav-steps .step:hover:after {
border-left-color: pink;
}
http://jsfiddle.net/chou_one/NemwU/
P.S there might be a cleaner approach to this, maybe with spans?

Answer 1

YOu add 99% correct :) instead of adding the ARROW to the <li> you need to add it to the <a>, where is a working demo.
CSS code change:
.steps-headers {
text-align: center;
}
.nav-steps {
border: none;
padding-bottom: 1px;
background-color: orange;
display: inline-block;
overflow: hidden;
}
.nav-steps>li>a {
margin-right: 0px;
line-height: 1.428571429;
width: 180px;
}
/* step arrow style */
.nav-steps>.step a:after {
position: absolute;
z-index: 2;
content: '';
top: 0px;
right: -30px;
border-bottom: 23px solid transparent;
border-left: 23px solid orange;
border-top: 20px solid transparent;
width: 31px;
}
/* disable step arrow style for last item */
.nav-steps>.step:last-child a:after {
display: none;
}
/* HOVER STYLE */
/* hover state */
.nav-steps>li a:hover {
background-color: pink;
color: white;
border-radius: 0px;
}
/* step arrow color on hover:after */
.nav-steps .step:hover a:after {
border-left-color: pink;
}
/* ACTIVE STYLE */
/* active state */
.nav-steps>li.active>a, .nav-steps>li.active>a:hover, .nav-steps>li.active>a:focus {
background-color: yellow;
color: black;
border-radius: 0px;
}
/* step arrow color on active:after */
.nav-steps .step.active a:after {
border-left-color: yellow;
}