diff --git a/planet/css/style.css b/planet/css/style.css
index 490c86cd07..b3570db4fb 100644
--- a/planet/css/style.css
+++ b/planet/css/style.css
@@ -427,3 +427,12 @@ a {
     justify-content: space-between;
 }
 
+.nav-extended {
+	position: sticky;
+	top: 0;
+	z-index: 100;
+}
+
+.nav-content {
+	display: none;
+}
diff --git a/planet/index.html b/planet/index.html
index 53a38e668d..b34ad5309c 100644
--- a/planet/index.html
+++ b/planet/index.html
@@ -41,6 +41,19 @@
         <script type="text/javascript" src="js/Planet.js"></script>
         <script type="text/javascript" src="js/main.js"></script>
     </head>
+    <script>
+        document.addEventListener("scroll", function () {
+            var navbar = document.querySelector(".nav-extended");
+            if (navbar){
+                if (document.body.scrollTop > 210 || document.documentElement.scrollTop > 210) {
+                navbar.classList.remove("lighten-1");
+                }
+                else{
+                navbar.classList.add("lighten-1");
+                }
+        }
+        });
+   </script>
 
     <body>
         <nav class="nav-extended light-green lighten-1" role="navigation">
@@ -52,14 +65,24 @@
                 <ul class="right tabs tabs-transparent" id="localglobal">
                     <li class="tab"><a class="active" id="local-tab" href="#local"></a></li>
                     <li class="tab"><a id="global-tab" href="#global"></a></li>
+                    <li>
+                        <li>
+                            <div class="nav-content" id="searchcontainer">
+                                <div class="container">
+                                    <div class="input-field search">
+                                        <i class="material-icons prefix "
+                                            id="searchicon">search</i><input
+                                            placeholder="Search here" id="global-search"
+                                            type="text"><span><i
+                                                class="material-icons"
+                                                id="search-close">clear</i></span>
+                                    </div>
+                                </div>
+                            </div>
+                        </li>
+                    </li>
                 </ul>
             </div>
-            <div class="nav-content" id="searchcontainer" style="display: none;">
-                <div class="container">
-                    <div class="input-field search">
-                        <i class="material-icons prefix" id="searchicon">search</i><input placeholder="" id="global-search" type="text"><span><i class="material-icons" id="search-close">clear</i></span>
-                    </div>
-                </div>
             </div>
         </nav>
 
diff --git a/planet/js/GlobalCard.js b/planet/js/GlobalCard.js
index e9c64ede85..5d41d54219 100644
--- a/planet/js/GlobalCard.js
+++ b/planet/js/GlobalCard.js
@@ -266,4 +266,4 @@ function copyURLToClipboard() {
         // eslint-disable-next-line no-console
         console.error("Failed to copy:", e.action);
     });
-}
\ No newline at end of file
+}
