Converted footer site navigation to <ul>.

Added .active class to show which page is currently loaded.
Added styles to support hover color change and .active class at the same time.
Added setActiveLink to javascript file which will change nav elements color based on current page loaded.

Author: Tomasz-Kluczkowski

_includes/footer.html

@@ -46,12 +46,15 @@ <h2 class="footer__section-title">Our Sponsors</h2>
         <div class="col-md-3">
             <h2 class="footer__section-title">Python Sprints</h2>
             <hr class="footer__divider">
-            <a class="footer__link" href="{{ '/' | prepend: site.baseurl }}">Home</a>
+            <ul class="pl-0 text-center">
+                <li><a class="footer__link" href="{{ '/' | prepend: site.baseurl }}">Home</a></li>
             {% for page in site.pages %}
                 {% if page.title %}
-                    <a class="footer__link" href="{{ page.url | prepend: site.baseurl }}">{{ page.title }}</a>
+                    <li><a class="footer__link" href="{{ page.url | prepend: site.baseurl }}">{{ page.title }}</a></li>
                 {% endif %}
             {% endfor %}
+            </ul>
+
         </div>
     </div>
 

_sass/style.scss

@@ -17,7 +17,7 @@ a {
   text-decoration: none !important;
   transition: all 0.5s ease-in-out;
   &:hover {
-    color: #A55605;
+    color: #A55605!important;
   }
 }
 
@@ -69,8 +69,8 @@ a {
 /*Here I need to move the background image to slide under the navigation*/
 /*Any smarter solutions are welcome!*/
 .navigation__content {
-  margin-top: -66px;
   background-size: cover;
+  margin-top: -66px;
   max-width: 100vw;
   height: 101vh;
 }
@@ -203,7 +203,8 @@ a {
   }
 }
 
-.navigation__overlay .navigation__link {
+
+.navigation__link {
   text-decoration: none;
   font-size: 2em;
   font-family: 'Encode Sans Expanded', sans-serif;
@@ -217,17 +218,17 @@ a {
 }
 
 @media (min-width: 768px), (orientation: portrait) {
-  .navigation__overlay .navigation__link {
-  padding: 0.25em;
+  .navigation__link {
+    padding: 0.25em;
   }
 }
 
 .navigation__link:hover {
-  color: #f1f1f1;
+  color: #f1f1f1!important;
 }
 
-.navigation__link:focus {
-  color: #035e9a;
+.active {
+  color: #035e9a!important;
 }
 
 .navigation__button-close-container {
@@ -652,11 +653,9 @@ a {
 
 .footer__link {
   margin-top: 2%;
-  text-align: center;
   font-size: 1.25em;
   font-family: 'Playfair Display', serif;
   color: #7fa0c2;
-  display: block;
 }
 
 .footer__brand-img {

static/js/site.js

@@ -29,9 +29,6 @@ function showCloseButton() {
     buttonCloseContainer.css("display", "inline");
 }
 
-// buttonOpenContainer.on("click", openNav);
-// navigationButtonClose.on("click", closeNav);
-
 // Responsive background image constructor.
 class ResponsiveBackgroundImage {
 
@@ -64,4 +61,15 @@ for (let i=0; i<elements.length; i++) {
     new ResponsiveBackgroundImage(elements[i]);
 }
 
+// Add active class to navigation elements in the navigation overlay and
+// footer on page load.
+$(setActiveLink());
 
+function setActiveLink() {
+    var currentURL = window.location.href;
+    $('.navigation__link, .footer__link').each(function () {
+        if (this.href === currentURL) {
+            $(this).addClass('active');
+        }
+    });
+}