I'm struggling to get the nth css button/list elements to display correctly using active_link_to. The first css button appears without any problems and is active, but when I try to add new buttons to the list, they seem to disappear.
HTML
<li class="nav-item">
<%= active_link_to '', profile_path, class_active: 'nav-link home-icon-btn active', :class_inactive => 'nav-link', active: :exclusive %>
</li>
<li class="nav-item">
<%= active_link_to '', analytics_path, class_active: 'nav-link analytics-icon-btn active', :class_inactive => 'nav-link' %>
</li>
CSS
.home-icon-btn {
background:url('white-home-btn-state-1.png') no-repeat;
cursor:pointer;
border:none;
height: 53px;
width: 50px;
}
.home-icon-btn:hover {
background: url('white-home-btn-state-2.png') no-repeat;
cursor: pointer;
}
.analytics-icon-btn {
background:url('white-analytics-btn-state-1.png') no-repeat;
cursor:pointer;
border:none;
height: 53px;
width: 50px;
}
.analytics-icon-btn:hover {
background: url('white-analytics-btn-state-2.png') no-repeat;
}
a.active {
border-bottom: 2px white solid;
border-spacing: 5px;
border-collapse: separate;
}