Gainsight/Custom_Templates/customer_templates/AIIM+/_header.html.liquid

<header class="np-header np-header-color np-hidden-mobile">
  <div class="np-header-content-upper">
    <div class="np-header-content-upper-left">
        <a class='upper-menu-button' href='https://www.aiim.org/'>
          << Back to AIIM.org
        </a>
    </div>
    <div class="np-header-content-upper-right">
      {% if current_person.signed_in? %}
        {% include 'user_bar_desktop' %}
      {% else %}
        <a class="np-header-sign-in np-header-desktop-nav-link np-header-font-color" href="{% route login %}"> {% t shared.sign_in %}
      {% endif %}
    </div>
  </div>
  <div class="np-header-content-bottom">
    {% if current_school.logo_url %}
      <h1 class="np-header-logo">
        <a href="{% route home %}">
          <img
            alt="{{ current_school.name }}"
            class="np-header-logo-image"
            src="{{ current_school.logo_url }}"
          />
        </a>
      </h1>
    {% else %}
      <a href="{% route home %}" class="np-school-name np-header-font-color">
        {{ current_school.name }}
      </a>
    {% endif %}
    <div class='bottom-menu'>
      <a class='bottom-menu-list aiim-yellow' href='https://community.aiim.org/home'>
        Home
      </a>
      <div class='menu-with-dropdown'>
        <div class='bottom-menu-list' id='communities-hover'>
          Communities <i class="fas fa-angle-down aiim-yellow"></i>
        </div>
        <div class='bottom-menu-list-dropdown' id="communities-list">
          <a class='bottom-menu-list-dropdown-item' href='https://community.aiim.org/home'>
            Open Forum
          </a>
          <a class='bottom-menu-list-dropdown-item' href='https://community.aiim.org/communities/allcommunities'>
            All Communities
          </a>
          <a class='bottom-menu-list-dropdown-item' href='https://community.aiim.org/communities/mycommunities'>
            My Communities
          </a>
        </div>
      </div>
      <div class='menu-with-dropdown'>
        <div class='bottom-menu-list' id='members-hover'>
          Find a Member <i class="fas fa-angle-down aiim-yellow"></i>
        </div>
        <div class='bottom-menu-list-dropdown' id="members-list">
          <a class='bottom-menu-list-dropdown-item' href='https://community.aiim.org/network/members'>
            Member Directory
          </a>
        </div>
      </div>
      <div class='menu-with-dropdown'>
        <div class='bottom-menu-list' id='events-hover'>
          Events <i class="fas fa-angle-down aiim-yellow"></i>
        </div>
        <div class='bottom-menu-list-dropdown' id="events-list">
          <a class='bottom-menu-list-dropdown-item' href='https://community.aiim.org/events'>
            Upcoming AIIM Events
          </a>
        </div>
      </div>
      <div class='menu-with-dropdown'>
        <div class='bottom-menu-list' id='resources-hover'>
          Resources <i class="fas fa-angle-down aiim-yellow"></i>
        </div>
        <div class='bottom-menu-list-dropdown' id="resources-list">
          <a class='bottom-menu-list-dropdown-item' href='https://community.aiim.org/resources/member-content'>
            AIIM+ Member Resources
          </a>
          <a class='bottom-menu-list-dropdown-item' href='https://community.aiim.org/browse/blogs'>
            Blogs
          </a>
          <a class='bottom-menu-list-dropdown-item' href='https://community.aiim.org/browse/casestudylibrary'>
            Case Study Library
          </a>
          <a class='bottom-menu-list-dropdown-item' href='https://community.aiim.org/network/supplierdirectory'>
            Solution Provider Directory
          </a>
        </div>
      </div>
      <div class='menu-with-dropdown'>
        <div class='bottom-menu-list' id='training-hover'>
          AIIM+ Pro: Training Courses <i class="fas fa-angle-down aiim-yellow"></i>
        </div>
        <div class='bottom-menu-list-dropdown' id="training-list">
          <a class='bottom-menu-list-dropdown-item' href='https://aiim.northpass.com/app'>
            Home
          </a>
          <a class='bottom-menu-list-dropdown-item' href='https://aiim.northpass.com/app/courses'>
            Courses
          </a>
          <a class='bottom-menu-list-dropdown-item' href='https://aiim.northpass.com/app/learning_paths'>
            Learning Paths
          </a>
        </div>
      </div>
    </div>
  </div>
</header>
<header class="np-hidden-desktop np-header-mobile-menu-nav">
  <div class='user-logo-mobile'>
  {% if current_person.signed_in? %}
    {% include 'mobile_buttons' %}
    {% include 'mobile_header' %}
  {% endif %}
  </div>
  <div class='mobile-school-logo'>
    {% if current_school.logo_url %}
        <h1 class="np-header-logo">
          <a href="{% route home %}">
            <img
              alt="{{ current_school.name }}"
              class="np-header-logo-image"
              src="{{ current_school.logo_url }}"
            />
          </a>
        </h1>
    {% else %}
        <a href="{% route home %}" class="np-school-name np-header-font-color">
          {{ current_school.name }}
        </a>
    {% endif %}
  </div>
</header>

{% include "messages" %}

<style>
  .bottom-menu {
    display: flex;
    flex-direction: row;
  }
  .np-header {
    display: flex;
    flex-direction: column;
    height: 135px;
    color: #fff;
  }
  .np-header-content-upper {
    width: 100%;
    justify-content: space-between;
    align-items: center;
    display: flex;
    flex-direction: row;
    margin-top: 5px;
  }
  .np-header-content-upper-right {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
  .np-header-content-bottom {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
  }
  .bottom-menu-list {
    padding: 20px 20px;
    color: #333333;
  }
  .menu-with-dropdown {
    display: flex;
    flex-direction: column;
  }
  .aiim-yellow {
    color: #FFAA1F !important;
  }
  .fa-angle-down {
    padding: 0 3px;
  }
  a:visited {
    text-decoration: none;
    color: initial;
  }
  a:hover {
    text-decoration: none;
    color: initial;
  }
  a {
    text-decoration: none;
    color: initial;
  }
  .bottom-menu-list-dropdown {
    flex-direction: column;
    display: none;
    background: #EBEBEB;
    position: absolute;
    margin-top: 45px;
    z-index: 1;
    padding: 15px;
    border-radius: 10px;
  }
  #communities-list:hover {
    display: flex;
  }
  #members-list:hover {
    display: flex;
  }
  #events-list:hover {
    display: flex;
  }
  #resources-list:hover {
    display: flex;
  }
  #training-list:hover {
    display: flex;
  }
  #communities-hover:hover + #communities-list {
    display: flex;
  }
  #members-hover:hover + #members-list {
    display: flex;
  }
  #events-hover:hover + #events-list {
    display: flex;
  }
  #resources-hover:hover + #resources-list {
    display: flex;
  }
  #training-hover:hover + #training-list {
    display: flex;
  }
  .bottom-menu-list-dropdown-item {
    padding: 10px 5px;
  }
  .bottom-menu-list-dropdown-item:hover {
    color: #FFAA1F
  }
  @media only screen and (max-width: 768px) {
    .bottom-menu {
      display: none;
    }
    .np-header-mobile-menu-nav {
    position: relative;
    height: 70px;
    display: flex;
    }
    .mobile-school-logo {
      margin: auto;
    }
    .np-header-mobile-menu-nav-button {
      height: 100%;
      width: 100%;
      padding-left: 15px;
    }
    .np-header-logo {
      margin: 0px;
      height: 60px;
    }
    .np-header-logo-image {
      height: 60px;
    }
  }
</style>