Adding line below navigation link bootstrap scrollspy

Question

I'm messing around with bootstrap scroll spy and I cant figure out how to a line below the link of the current section you are in.

Should be pretty simple but I cant get it! I want it to look like this:

So you are in the portfolio section and in turn portfolio would be highlighted WITH the stupid little line below. Can any one help out? You can check live version here if needed.

Answer 1

Customized class :

.navbar .nav li.active:after {
   content: "\f1ac";
   font-family: Ionicons;
   font-style: normal;
   font-size: 42px;
   color: #fff;
   position: absolute;   // <---- Add this 3 lines to center icon
   width: 100%;
   text-align: center;
}