Added navigation items hiding on desktop / mobile (we have events & chapters next to each other on large screens but not on mobiles).

Author: Tomasz-Kluczkowski

_includes/navigation.html

@@ -54,12 +54,15 @@
             <li class="nav-item active">
                 <a class="navigation__link active nav-link" href="{{ '/' | prepend: site.baseurl }}">Home<span class="sr-only">(current)</span></a>
             </li>
-            <li class="nav-item">
+            <li class="hide-on-desktop nav-item">
                 <a class="navigation__link nav-link" href="#upcoming">Events</a>
             </li>
-            <li class="nav-item">
+            <li class="hide-on-desktop nav-item">
                 <a class="navigation__link nav-link" href="#chapters">Chapters</a>
             </li>
+            <li class="hide-on-mobile nav-item">
+                <a class="navigation__link nav-link" href="#events">Events & Chapters</a>
+            </li>
             <li class="nav-item">
                 <a class="navigation__link nav-link" href="#about">About</a>
             </li>

_sass/style.scss

@@ -42,6 +42,19 @@ a {
   padding-right: 15px;
 }
 
+@media (min-width: 992px){
+  .hide-on-desktop {
+  display: none;
+  }
+}
+
+@media (max-width: 991px) {
+  .hide-on-mobile {
+    display: none;
+  }
+}
+
+
 .page__background-img-container {
   position: relative;
   &::after {
@@ -225,6 +238,8 @@ a {
 }
 
 .navigation__link {
+  padding-left: 0.5em;
+  padding-right: 0.5em;
   text-decoration: none;
   font-size: 1.25em;
   font-family: 'Encode Sans Expanded', sans-serif;