Restructure header navbar to fit elements on all screens

_data/navigation.yml

@@ -11,37 +11,26 @@
 # original Markdown.
 
 header:
-        - title: Home
-          url: /
-          fontawesome_class: "fas fa-home"
-
         - title: News
           url: blog/
-          fontawesome_class: "fas fa-rss"
 
         - title: Services
           url: "/"
-          fontawesome_class: "fas fa-list"
 
         - title: Mission
           url: "/"
-          fontawesome_class: "fas fa-bolt"
 
         - title: Roadmap
           url: "/"
-          fontawesome_class: "fas fa-map-signs"
 
         - title: International
           url: "/"
-          fontawesome_class: "fas fa-globe-europe"
 
         - title: Contact
           url: "contact"
-          fontawesome_class: "fas fa-envelope"
 
         - title: Jobs
           url: "/"
-          fontawesome_class: "fas fa-user"
 
 footer:
          - title: Contact

_includes/header.html

@@ -55,9 +55,11 @@ See also:
             {% for entry in site.data.navigation.header %}
                 <a href="{{ entry.url | relative_url }}" class="btn btn-header">
                     <span class="navigation-entry">
+                        {% if entry.fontawesome_class %}
                         <i class="navigation-icon {{ entry.fontawesome_class }}"
                            title="{{ entry.title }}">
                         </i>
+                        {% endif %}
                         <span class="navigation-text">{{ entry.title }}</span>
                     </span>
                 </a>

_sass/common/_header.scss

@@ -196,7 +196,7 @@
     }
 }
 
-@include medium-is-phone {
+@include medium-is-tablet-minus {
     .header{
         .nav_toggle {
             display:                block;