diff --git a/_layouts/default.html b/_layouts/default.html
index 05271afeb3..0e1406e3ef 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -7,6 +7,7 @@
         <meta name="viewport" content="width=device-width">
         <link rel="icon" type="image/x-icon" href="/images/logo.png"/>
         <link rel="stylesheet" href="/css/main.css">
+        <script src="/script/script.js" defer></script>
         <link rel="alternate" type="application/rss+xml" title="RSS" href="/feed.xml">
     </head>
 
diff --git a/css/main.css b/css/main.css
index d93ed16ac9..07ab16a9c3 100644
--- a/css/main.css
+++ b/css/main.css
@@ -35,16 +35,33 @@ body {
     -webkit-box-flex: 1;
     -webkit-flex: 1;
     -ms-flex: 1;
-    flex: 1;
     max-width: 700px;
 }
 
 .navbar {
   float: left;
+  position: -webkit-sticky;
+  position: sticky;
+  top: 0;
   text-align: left;
+  height: fit-content;
   width: 15em;
   padding: 2em;
-  padding-right: 0;
+}
+
+.navbar > ul {
+  margin: 0;
+  list-style: none;
+  position: relative;
+  line-height: 0;
+}
+
+.navbar > ul > li {
+  margin: .5rem 0;
+}
+
+.navbar > ul > li.active {
+  font-weight: bold;
 }
 
 #menuLinkBar {
@@ -64,6 +81,7 @@ body {
   display: -ms-flexbox;
   display: flex;
   margin: 0 auto;
+  width: 100%;
   justify-content: center;
 }
 
@@ -80,6 +98,7 @@ body {
         -webkit-order: 2;
         -ms-flex-order: 2;
         order: 2;
+        padding: 1em;
     }
     .navbar {
         width: auto;
@@ -87,6 +106,7 @@ body {
         -webkit-order:3;
         -ms-flex-order:3;
         order:3;
+        padding: 1em;
     }
     #menuLinkBar {
         display: block;
@@ -795,10 +815,10 @@ pre {
   -moz-border-radius: 3px;
   -ms-border-radius: 3px;
   -o-border-radius: 3px;
+  white-space: pre-wrap;
   border-radius: 3px;
   display: block;
   padding: 10px 15px 13px 15px;
-  margin: 0 3em 1em 3em;
   background-color: #fff;
   border: solid 1px #efeee6;
   line-height: 18px;
@@ -2015,7 +2035,7 @@ th, td {
 }
 
 img {
-  max-width: 100%;
+  max-width: 50%;
 }
 
 /* Table of contents */
diff --git a/script/script.js b/script/script.js
new file mode 100644
index 0000000000..4e0dfb012a
--- /dev/null
+++ b/script/script.js
@@ -0,0 +1,9 @@
+const NAVBAR_LI_ELEMENTS = document.getElementById('navbar').firstElementChild.children;    // Access all the <li> in side navigation
+
+// check for a match with the <li> element and SITE_URL, then make it active
+Array.from(NAVBAR_LI_ELEMENTS).forEach((liElement) => {
+    if (liElement.firstElementChild.href == location.href) {
+        liElement.classList.add('active');
+        return;
+    }
+})
\ No newline at end of file