Fix navbar position

Add sticky postioning so navbar is always visible

Author: davidsmorais

src/components/Nav.jsx

@@ -36,19 +36,21 @@ class Nav extends React.PureComponent {
               <a href="#features">FEATURES</a>
             </li>
             <li>
-              <a href="#download">DOWNLOAD</a>
+              <a href="#download">
+                DOWNLOAD<i class="fas fa-download"></i>
+              </a>
             </li>
             {configs.app_github_url && (
               <li>
                 <a href={configs.app_github_url}>
-                  GitHub <i className="fab fa-github" />
+                  GITHUB <i className="fab fa-github" />
                 </a>
               </li>
             )}
             {configs.community_website && (
               <li>
                 <a href={configs.community_website}>
-                  Community <i className="fas fa-comments" />
+                  COMMUNITY <i className="fas fa-comments" />
                 </a>
               </li>
             )}

src/components/style.js

@@ -80,11 +80,6 @@ export default createGlobalStyle`
     border-radius: 0px 0px 40px 40px;
   }
 
-  .headerBackground {
-    height: 115px;
-    background-color: ${configs.header_background};
-  }
-
   .container {
     // Set up the container for the site content
     display: grid;
@@ -122,7 +117,12 @@ export default createGlobalStyle`
 
   header {
     display: flex;
+    padding: 0px 50px;
+    position: sticky;
+    top: 0;
     width: 100%;
+    background-color: ${configs.header_background};
+    z-index: 2;
   }
 
   .logo {

src/pages/index.js

@@ -93,22 +93,22 @@ class IndexPage extends React.PureComponent {
       <Layout>
         <SEO title="Home" keywords={configs.app_keywords} />
 
+        <Nav data={data} />
         <div
           className="imageWrapper"
           style={{
             background: configs.main_color,
           }}
         >
-          <div className="headerBackground">
-            <div className="container">
-              <Nav data={data} />
-              <Header data={data} version={version} />
-              <Features />
-              <Changelog releaseNotes={releaseNotes} />
-              <Footer />
-            </div>
+          <div className="container">
+            <Header data={data} version={version} />
           </div>
         </div>
+        <div className="container">
+          <Features />
+          <Changelog releaseNotes={releaseNotes} />
+          <Footer />
+        </div>
       </Layout>
     )
   }