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.