diff --git a/_layouts/default.html b/_layouts/default.html
index 52d34e97d3..a4d20af260 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -57,7 +57,7 @@
         </a>
       </div>
       <nav role="navigation" aria-label="Main" id="site-nav" class="site-nav">        
-        <div class="version-wrapper">
+        <div class="version-wrapper" id="version-panel">
           {% if page.section == "opensearch" %}
             <a href="{{site.url}}{{site.baseurl}}/about/" class="site-category">{{ page.section-name }}</a>
           {% else %}
diff --git a/_sass/custom/custom.scss b/_sass/custom/custom.scss
index 4136778c46..8e2473f2fd 100644
--- a/_sass/custom/custom.scss
+++ b/_sass/custom/custom.scss
@@ -67,6 +67,10 @@ code {
   margin-right: 0.5rem;
 }
 
+.nav-shadow {
+  box-shadow: 0 6px 4px -4px $grey-lt-300;
+}
+
 .main-content {
   ol {
     > li {
diff --git a/assets/js/listener.js b/assets/js/listener.js
index 62d0afe2e8..2d7221c73d 100644
--- a/assets/js/listener.js
+++ b/assets/js/listener.js
@@ -4,7 +4,8 @@ const numCharsLabel = document.getElementById('num-chars');
 const sendButton = document.getElementById('send');
 const commentTextArea = document.getElementById('comment');
 const thankYouText = document.getElementById('thank-you');
-
+const nav = document.getElementById('site-nav');
+const versionPanel = document.getElementById('version-panel');
 document.addEventListener('DOMContentLoaded', updateTextArea);
 
 document.addEventListener('click', function(event) {
@@ -32,6 +33,14 @@ document.addEventListener('click', function(event) {
     }
 });
 
+nav.addEventListener('scroll',(e)=>{  
+    if(nav.scrollTop > 0){
+      versionPanel.classList.add("nav-shadow");
+    }else{
+      versionPanel.classList.remove("nav-shadow");
+    }
+  });
+
 commentTextArea.addEventListener('input', updateTextArea);
 
 function updateTextArea() {