Commit 20f8c1f3 authored by Hueser, Christian (FWCC) - 138593's avatar Hueser, Christian (FWCC) - 138593 Committed by Erxleben, Fredo
Browse files

Add icons to navigation bar

We chose 5 icons to be added to navigation bar. Style differs on
different devices.
parent 9375d315
......@@ -14,18 +14,23 @@
header:
- title: Home
url: index.html
fontawesome_class: "fas fa-home"
- title: Services
url: services.html
fontawesome_class: "fas fa-chalkboard-teacher"
- title: Blog
url: blog/index.html
fontawesome_class: "fas fa-blog"
- title: Events
url: events.html
fontawesome_class: "fas fa-calendar-week"
- title: Team
url: team.html
fontawesome_class: "fas fa-users"
footer:
- title: Imprint
......
......@@ -46,7 +46,8 @@ See also:
<nav>
{% for entry in site.data.navigation.header %}
<a href="{{ entry.url | absolute_url }}">
{{ entry.title }}
<i class="navigation-icon {{ entry.fontawesome_class }}" title="{{ entry.title }}"></i>
<span class="navigation-title">{{ entry.title }}</span>
</a>
{% endfor %}
</nav>
......
......@@ -99,6 +99,15 @@
vertical-align: middle;
display: inline-block;
color: $color-helmholtz-blue;
/* Navigation items have both an icon and a title. */
.navigation-icon {
display: inline-block;
}
.navigation-title {
display: inline-block;
}
}
/* The transition element at the end of the header */
......@@ -111,6 +120,21 @@
}
}
@include medium-is-tablet {
.header {
nav {
/* Navigation items have an icon and no title. */
.navigation-icon {
display: block;
}
.navigation-title {
display: block;
@include font-extra-small;
}
}
}
}
@include medium-is-phone {
.header{
......@@ -133,6 +157,15 @@
*/
nav {
display: none;
/* Navigation items have a title and no icon. */
.navigation-icon {
display: inline-block;
}
.navigation-title {
display: inline-block;
}
}
}
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment