Files
Gainsight/Custom_Templates/customer_templates/Skan/_sub_navigation.html.liquid

102 lines
3.6 KiB
Plaintext

<nav class="np-sub-navigation">
<div class="np-sub-navigation-content">
{% for link in navigations.sub_navigation %}
{% if link.label == 'Home' %}
<div class="np-sub-navigation-content-item {{ link.active_class }}" >
<div class="np-sub-navigation-content-item-bar np-button-background-color"></div>
<a class="np-sub-navigation-content-item-link" href="{{ link.url }}">
{% comment %}<i class="{{ link.icon }} np-button-color np-sub-navigation-content-item-icon"></i>{% endcomment %}
Certifications
</a>
</div>
{% endif %}
{% endfor %}
{% for link in navigations.sub_navigation %}
{% if link.label == 'Dashboard' %}
<div class="np-sub-navigation-content-item {{ link.active_class }}" >
<div class="np-sub-navigation-content-item-bar np-button-background-color"></div>
<a class="np-sub-navigation-content-item-link" href="{{ link.url }}">
{% comment %}<i class="{{ link.icon }} np-button-color np-sub-navigation-content-item-icon"></i>{% endcomment %}
{{ link.label }}
</a>
</div>
{% endif %}
{% endfor %}
{% for link in navigations.sub_navigation %}
{% if link.label == 'Events' %}
<div class="np-sub-navigation-content-item {{ link.active_class }}" >
<div class="np-sub-navigation-content-item-bar np-button-background-color"></div>
<a class="np-sub-navigation-content-item-link" href="{{ link.url }}">
{% comment %}<i class="{{ link.icon }} np-button-color np-sub-navigation-content-item-icon"></i>{% endcomment %}
{{ link.label }}
</a>
</div>
{% endif %}
{% endfor %}
<div class="np-sub-navigation-content-item" >
<div class="np-sub-navigation-content-item-bar np-button-background-color"></div>
<a class="np-sub-navigation-content-item-link" href="https://www.skan.ai/company" target="_blank">
{% comment %}<i class="{{ link.icon }} np-button-color np-sub-navigation-content-item-icon"></i>{% endcomment %}
About Us
</a>
</div>
<div class="np-sub-navigation-content-item" >
<div class="np-sub-navigation-content-item-bar np-button-background-color"></div>
<a class="np-sub-navigation-content-item-link" href="mailto:skan_university@skan.ai" target="_blank">
{% comment %}<i class="{{ link.icon }} np-button-color np-sub-navigation-content-item-icon"></i>{% endcomment %}
Contact
</a>
</div>
</div>
</nav>
<style>
.np-sub-navigation{
background: #FFFFFF;
}
.np-sub-navigation-content{
display: flex;
flex-direction: row;
justify-content: space-evenly;
}
.np-sub-navigation-content-item-bar{
margin: -1.5rem auto 1.25rem auto;
width: 3.3rem;
}
@media screen and (min-width: 768px){
.np-sub-navigation{
height: 75px;
padding: 28px;
width: 92%;
}
.np-sub-navigation-content-item-link{
font-size: 27px;
color: #000000;
}
.np-sub-navigation-content-item-link:hover {
Color: #3421BA;;
transition: color .5s ease, background .5s ease, border .5s;
}
.np-sub-navigation-content-item-bar{
margin: -1.75rem auto 1.25rem auto;
background: #3421BA;
display: none !important;
}
.np-sub-navigation-content-item-active
.np-sub-navigation-content-item-link {
Color: #3421BA;;
}
.np-sub-navigation-content-item-link,
.np-sub-navigation-content-item-active .np-sub-navigation-content-item-link{
font-weight: 700;
}
}
</style>