<div class="np-hidden-mobile np-sub-navigation-content" style="display: none">
  {% for link in navigations.sub_navigation %}
    {% if link.label == "Dashboard" %}
      <div class="np-sub-navigation-content-item {{ link.active_class }}">
        <a class="np-sub-navigation-content-item-link" href="{{ link.url }}">
          My Courses
        </a>
      </div>
    {% else %}
      <div class="np-sub-navigation-content-item {{ link.active_class }}">
        <a class="np-sub-navigation-content-item-link" href="{{ link.url }}">
          {{ link.label }}
        </a>
      </div>
    {% endif %}
  {% endfor %}
</div>

<style>
  .np-sub-navigation-content-item-active .np-sub-navigation-content-item-link {
    color: #ff0036;
  }

  .np-sub-navigation-content-item-link {
    color: #000;
    font-weight: 600;
  }

  @media (min-width: 768px) {
    .np-sub-navigation-content {
      align-items: center;
      margin-left: 40px;
    }

    .np-sub-navigation-content-item-link {
      justify-content: center;
    }
  }
</style>

<script>
  document.querySelector(".logo-and-sub-nav > .np-sub-navigation-content").style.removeProperty("display");
</script>