Introduced sticky navbar in navigation.html.

Introduced id's to enable navigation.

Author: Tomasz-Kluczkowski

_includes/navigation.html

@@ -1,7 +1,11 @@
+{% comment %}
 <nav class="navigation navbar sticky-top navbar-light">
     <div class="navigation__brand">
-        <a class="navigation__brand-link navbar-brand" href="{{ '/' | prepend: site.baseurl }}">
-            <img class="navigation__brand-img" src="{{ site.baseurl }}/static/images/site_logo/python_sprints_logo_triangles_flat_light_text_502x100px.png" alt="Python Sprints Logo">
+        <a class="navigation__brand-link navbar-brand"
+           href="{{ '/' | prepend: site.baseurl }}">
+            <img class="navigation__brand-img"
+                 src="{{ site.baseurl }}/static/images/site_logo/python_sprints_logo_triangles_flat_light_text_502x100px.png"
+                 alt="Python Sprints Logo">
         </a>
     </div>
 
@@ -18,12 +22,47 @@
     </div>
     <div class="navigation__overlay">
         <div class="navigation__overlay-content">
-            <a class="navigation__link" href="{{ '/' | prepend: site.baseurl }}">Home</a>
+            <a class="navigation__link"
+               href="{{ '/' | prepend: site.baseurl }}">Home</a>
             {% for page in site.pages %}
-                {% if page.title %}
-                    <a class="navigation__link" href="{{ page.url | prepend: site.baseurl }}">{{ page.title }}</a>
-                {% endif %}
+            {% if page.title %}
+            <a class="navigation__link"
+               href="{{ page.url | prepend: site.baseurl }}">{{ page.title
+                }}</a>
+            {% endif %}
             {% endfor %}
         </div>
     </div>
 </nav>
+{% endcomment %}
+
+
+<nav class="navigation navbar navbar-expand-lg navbar-dark sticky-top">
+    <a class="navigation__brand-link navbar-brand" href="{{ '/' | prepend: site.baseurl }}">
+        <img class="navigation__brand-img"
+             src="{{ site.baseurl }}/static/images/site_logo/python_sprints_logo_triangles_flat_light_text_502x100px.png"
+             alt="Python Sprints Logo">
+    </a>
+    <button class="navbar-toggler" type="button" data-toggle="collapse"
+            data-target="#navbarToggler"
+            aria-controls="navbarToggler" aria-expanded="false"
+            aria-label="Toggle navigation">
+        <span class="navigation__icon navbar-toggler-icon"></span>
+    </button>
+    <div class="collapse navbar-collapse" id="navbarToggler">
+        <ul class="navbar-nav ml-auto mt-2 mt-lg-0">
+            <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">
+                <a class="navigation__link nav-link" href="#upcoming">Events</a>
+            </li>
+            <li class="nav-item">
+                <a class="navigation__link nav-link" href="#chapters">Chapters</a>
+            </li>
+            <li class="nav-item">
+                <a class="navigation__link nav-link" href="#about">About</a>
+            </li>
+        </ul>
+    </div>
+</nav>

_sass/style.scss

@@ -5,7 +5,7 @@
   overflow-x: hidden;
   /*Here I need to move the background image to slide under the navigation*/
   /*Any smarter solutions are welcome!*/
-  margin-top: -66px;
+  //margin-top: -66px;
 
 }
 
@@ -96,6 +96,10 @@ a {
   }
 }
 
+.navigation {
+  background: rgba(0, 0, 0, 0.9);
+}
+
 
 .navigation__content {
   @extend .page__background-img-container;
@@ -117,7 +121,7 @@ a {
 }
 
 .navigation__brand-link {
-  width: 100%;
+  //width: 100%;
 }
 
 .navigation__brand-img {
@@ -131,6 +135,10 @@ a {
   }
 }
 
+.navigation__icon {
+  color: grey;
+}
+
 .navigation__button-open-container {
   border: black 1px solid;
   border-radius: 6px;
@@ -218,10 +226,10 @@ a {
 
 .navigation__link {
   text-decoration: none;
-  font-size: 2em;
+  font-size: 1.25em;
   font-family: 'Encode Sans Expanded', sans-serif;
-  color: $nav-link;
-  display: block;
+  color: $nav-link!important;
+  //display: block;
   transition: all 0.5s ease-in-out;
 }
 

index.html

@@ -36,7 +36,7 @@ <h2 class="navigation__subtitle">All About Open Source</h2>
         </div>
     </div>
 </div>
-<div class="upcoming-chapters-container container-fluid">
+<div id="upcoming" class="upcoming-chapters-container container-fluid">
     <div class="row">
         {% include events_array_generator.html future_events = true %}
         {% if posts.size > 0 %}
@@ -106,7 +106,7 @@ <h2 class="upcoming__event-subtitle"> {{ post.subtitle }}</h2>
         {% endif %}
 
         <div class="{{ chapters_col }} no-padding-x">
-            <section class="chapters">
+            <section id="chapters" class="chapters">
                 <div class="row container-fluid">
                     <div class="col-12 no-padding-x">
                         <div class="row">
@@ -166,7 +166,7 @@ <h2 class="chapters__card-title">{{ chapter.title }}</h2>
 {% endcomment %}
 
 <!--Services section-->
-<section class="services">
+<section id="about" class="services">
     <div class="container-fluid">
         <div class="row">
             <div class="col-md-12">