Courses and course formats

Hi, So i have been trying to change my menu to show like a fancy breadumb navigation, so the students know the progress they are going on.

But it seems there is a problem with firstchild, lastchild in css i am guessing hence not doing what i am expecting..

So i chose onetopic format to do my styling. 

What i am trying to achieve: 

I am trying to achieve the breadcumb like at http://line25.com/wp-content/uploads/2013/breadcrumbs/demo/demo.html but with the text hidden, and smaller chevrons to fit in one line, while when active, the text is visible, and when hover text visible too. I am using similar thing, with a circle works great, but chevron is making a bit of a problem.

Code:

  .nav-tabs>li>a { 
            display: block;
            float: left;
            height:25px;
            background: #3498db;
            padding: 15px 20px 0 40px;
            position: relative;
            margin: 0 15px 0 0; 
            text-decoration: none;
       color: transparent;
    }
            .nav-tabs>li>a:after {
                content: "";  
                border-top: 20px solid transparent;
                border-bottom: 20px solid transparent;
                border-left: 20px solid #3498db;
                position: absolute; right: -20px; top: 0;
                z-index: 1;
            }
            
            .nav-tabs>li>a:before {
                content: "";  
                border-top: 20px solid transparent;
                border-bottom: 20px solid transparent;
                border-left: 20px solid transparent;
                position: absolute; left: 0; top: 0;
            }
    
                .nav-tabs>li>:first-child a {
                    border-top-left-radius: 5px; border-bottom-left-radius: 10px;
                }
                .nav-tabs>li>:first-child a:before {
                    display: none; 
                }
                
                .nav-tabs>li>:last-child a {
                    padding-right: 40px;
                    border-top-right-radius: 5px; border-bottom-right-radius: 5px;
                }
                .nav-tabs>li>:last-child a:after {
                    display: none; 
                }
            
            .nav-tabs>li>a:hover {
                background: #fa5ba5;
            }
                .nav-tabs>li>a:hover:after {
                    border-left-color: #fa5ba5;

.nav-tabs>.active>a, .nav-tabs>.active>a:hover, .nav-tabs>.active>a:focus {
background: white;
color: black;
width: auto;

}

Expected Result: 

Shown Result:

Topic View at the moment:

Works great, but i want like a progress bar kinda feel. So you know where you are the moment, and this could really look beautiful. Right now topics are not visible until active or hover on to.