Neat CSS trick to horizontally center navigation indicators on dynamically-sized nav items.
.navbar.home .navbar-nav li{
position: relative;
}
.navbar.home .navbar-nav li.active a:after{
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #bd0304; // Triangle
content: ''; // Empty content
height: 0;
left: 50%;
margin-left: -10px; // The width of your indicator
position: absolute;
top: 100%;
width: 0;
}
/*
<ul class="nav navbar-nav">
<li class="active"><a href="#">Featured</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Ordering Food</a></li>
<li><a href="#">Your Clients</a></li>
<li><a href="#">Education</a></li>
<li><a href="#">Support</a></li>
</ul>
*/