элементы списка active_link_to исчезают при неактивных кнопках CSS img

У меня возникли проблемы с отображением элементов nth css button/list с active_link_to. Первая кнопка css отображается без проблем и активна. Когда я добавляю новые кнопки в список, они исчезают.

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;
  //cursor: pointer;
}
a.active {
  border-bottom: 2px white solid;
  border-spacing: 5px;
  border-collapse: separate;
}

1 ответ

  1. Мне пришлось добавить класс css для кнопки в неактивное состояние.

    <%= active_link_to '', analytics_path, class_active: 'nav-link analytics-icon-btn active', :class_inactive => 'nav-link analytics-icon-btn' %>