Currently, I am utilizing active_link_to to monitor changes in the state of my navigation bar links. Upon adding styling to the active state, the appearance resembles the image depicted below. My aim is to shift the border of the active state towards the top of the link, similar to Twitter's navigation bar design. Additionally, it appears that all states are currently displaying as active for the navigation bar when ideally only one link should exhibit the active-state border.
Navigation Item with Awesome Font Icon and top-border floating towards the right
HTML
<nav class="navbar navbar-dark navbar-full navbar-fixed-top bg-inverse" style="font-size: 18px;">
<a class="navbar-brand" href="#"><%= image_tag 'logo.png' %></a>
<ul class="nav navbar-nav navbar-properties">
<% if user_signed_in? %>
<li class="nav-item">
<%= active_link_to awesome_link 'fa fa-home fa-3x', home_path, :class => 'nav-item nav-link', title: 'Home', style: 'color: white' %>
</li>
...
</nav>
The awesome_link generates the following link tag:
<a href="/"><i class="fa fa-arrow-circle-o-up"></i></a>
CSS
nav a.active {
border-style: solid;
border-top: thick solid #27CCC0;
}