diff --git a/misc/www/css/custom.css b/misc/www/css/custom.css
index 5c4411d3ba..aa2153b2b5 100644
--- a/misc/www/css/custom.css
+++ b/misc/www/css/custom.css
@@ -77,9 +77,12 @@
     border-radius: 6px;
     /* border: 1px solid #eee; */
     height: 250px; }
+
   .example-screenshot {
     width: 100%;
-    height: auto; }
+    height: auto;
+  }
+
   .example-screenshot.coming-soon {
     width: auto;
     position: absolute;
@@ -88,8 +91,126 @@
     right: 5px;
     bottom: 5px;
     left: 5px; }
+
   .navbar {
-    display: none; }
+    display: none;
+    height: 70px;
+    background: #3a3a3a;
+    font-weight: 400;
+    font-style: normal;
+  }
+
+  .nav-container {
+    max-width: 800px; 
+    margin: 0 auto;
+  }
+  
+  /* Mobile navigation */
+  .nav-mobile {
+    z-index: 2000;
+    display: block;
+    position: fixed;
+    top: 0;
+    right: 0;
+    height: 70px;
+    width: 70px;
+  }
+
+  nav ul li a:not(:only-child):after,
+  nav ul li a:visited:not(:only-child):after {
+    padding-left: 4px;
+    /* content: " ▾"; */
+  }
+  nav ul li ul li {
+    min-width: 190px; 
+  } 
+  nav ul li ul li a {
+    padding: 15px;
+    line-height: 20px;
+  }
+
+  .nav-dropdown {
+    position: absolute;
+    display: none;
+    z-index: 1;
+    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
+  }
+
+  #nav-toggle {
+    position: absolute;
+    left: 18px;
+    top: 22px;
+    cursor: pointer;
+    padding: 10px 35px 16px 0px;
+  }
+  #nav-toggle span,
+  #nav-toggle span:before,
+  #nav-toggle span:after {
+    cursor: pointer;
+    border-radius: 1px;
+    height: 5px;
+    width: 35px;
+    background: #f15a24;
+    position: absolute;
+    display: block;
+    content: "";
+    transition: all 300ms ease-in-out;
+  }
+  #nav-toggle span:before {
+    top: -10px;
+  }
+  #nav-toggle span:after {
+    bottom: -10px;
+  }
+  #nav-toggle.active span {
+    background-color: transparent;
+  }
+  #nav-toggle.active span:before, #nav-toggle.active span:after {
+    top: 0;
+  }
+  #nav-toggle.active span:before {
+    transform: rotate(45deg);
+  }
+  #nav-toggle.active span:after {
+    transform: rotate(-45deg);
+  }
+
+  topnav {
+    /* display: none; */
+    position: fixed;
+    top: 0;
+    left:0;
+    width: 100%;
+    z-index: 1000;
+    background-color: rgb(31, 31, 31);
+    text-transform: uppercase;
+    font-size: 15px;
+    font-weight: 600;
+    letter-spacing: .2rem;
+    text-decoration: none;
+    line-height: 2rem;
+  }
+
+  topnav ul {
+    /* margin-top: 2.5rem; */
+    display: none;
+    border-bottom: 1px solid #3b3b3b;
+  }
+
+  topnav li {
+    margin-top: 2.5rem;
+    margin-bottom: 1.5rem;
+  }
+
+  topnav a {
+    text-decoration: none;
+  }
+
+  topnav .menuentry {
+    color:#999;
+    text-decoration: none;
+    list-style: none;
+  }
 
   .glossary {
     font-style: italic;
@@ -112,6 +233,27 @@
     .container {
       overflow-y: visible;
     }
+    .nav-container {
+      overflow-y: visible;
+    }
+    .nav-mobile {
+      display: block;
+    }
+    .nav-dropdown {
+      position: static;
+    }
+    nav ul {
+      display: none;
+      /* position: relative; */
+    }
+    nav ul li {
+      float: none;
+    }
+
+    /* topnav {
+      display: none;
+    } */
+
     .header {
       /* margin-top: 18rem;  */
       padding-top: 18rem;}
@@ -142,6 +284,23 @@
       overflow-y: visible;
     }
     /* Navbar */
+    .nav-container {
+      overflow-y: visible;
+    }
+    .nav-mobile {
+      display: none;
+      position: fixed;
+    }
+    .nav-dropdown {
+      position: static;
+    }
+    nav ul {
+      display: block;
+      /* position: relative; */
+    }
+    nav ul li {
+      float: none;
+    }
     .navbar + .docs-section {
       border-top-width: 0; }
     .navbar,
diff --git a/misc/www/index.html b/misc/www/index.html
index 23d2340a07..82d3bea095 100644
--- a/misc/www/index.html
+++ b/misc/www/index.html
@@ -39,7 +39,9 @@
 
   <!-- Scripts
   –––––––––––––––––––––––––––––––––––––––––––––––––– -->
-  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
+  <!-- <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> -->
+  <script src="https://code.jquery.com/jquery-3.5.1.min.js"
+    integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
   <script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js"></script>
   <link rel="stylesheet" href="css/github-prettify-theme.css">
   <script async defer src="https://buttons.github.io/buttons.js"></script>
@@ -51,8 +53,34 @@
 
 <body class="code-snippets-visible">
 
-  <!-- <div class="container"> -->
   <div class="header">
+    <topnav>
+      <ul class="navbar-list">
+        <li class="navbar-item"><a href="index.html#intro">Intro</a></li>
+      </ul>
+      <ul class="navbar-list">
+        <li class="menuentry">Hardware</li>
+        <li class="navbar-item"><a href="index.html#microrusefi">microRusEFI</a></li>
+        <li class="popover-item"><a href="index.html#proteus">Proteus</a></li>
+      </ul>
+      <ul class="navbar-list">
+        <li class="menuentry">Documentation</li>
+        <li class="popover-item"><a href="https://github.com/rusefi/rusefi/wiki/microRusEFI-Manual">microRusEFI</a>
+        <li class="popover-item"><a href="https://github.com/rusefi/rusefi/wiki/Proteus-Manual">Proteus</a>
+      </ul>
+      <ul class="navbar-list">
+        <li class="popover-item"><a href="index.html#shop">Shop</a></li>
+      </ul>
+      <ul class="navbar-list">
+        <li class="menuentry">Links</li>
+        <li class="popover-item"><a href="http://www.rusefi.com/online">rusEFI online</a>
+        <li class="popover-item"><a href="http://www.rusefi.com/forum">Forum</a>
+        <li class="popover-item"><a href="https://github.com/rusefi/rusefi/wiki">Wiki</a>
+      </ul>
+      <ul class="navbar-list">
+        <li class="popover-item"><a href="https://github.com/rusefi/rusefi/wiki/Download">Download</a></li>
+      </ul>
+    </topnav>
     <div class="container">
       <img src="images/site/logo_wht.png" width="70%">
       <h4 class="title">A GPL open source Engine Management System</h4>
@@ -60,27 +88,14 @@
         aria-label="Follow @rusefi on GitHub">Follow @rusefi</a>
       <a class="github-button" href="https://github.com/rusefi/rusefi/subscription" data-icon="octicon-eye"
         data-size="large" data-show-count="true" aria-label="Watch rusefi/rusefi on GitHub">Watch</a>
-      <!-- <a class="button" href="https://rusefi.com" onClick="_gaq.push(['_trackEvent', 'skeleton', 'download'])">Getting
-            started</a> -->
       <div class="value-props row">
-        <!-- <div class="four columns value-prop">
-          <i class="fa fa-bar-chart fa-4x" aria-hidden="true"></i> <br>
-          32bit MCU
-        </div>
-        <div class="four columns value-prop">
-          <i class="fa fa-code-fork fa-4x" aria-hidden="true"></i> <br>
-          GPL open source </p>
-        </div>
-        <div class="four columns value-prop">
-          <i class="fa fa-clock-o fa-4x" aria-hidden="true"></i> <br>
-          Quick to start with prebuilt boards
-        </div> -->
       </div>
     </div>
   </div>
 
+  <div class="nav-mobile"><a id="nav-toggle" href="#!"><span></span></a></div>
   <nav class="navbar">
-    <div class="container">
+    <div class="nav-container">
       <ul class="navbar-list">
         <li class="navbar-item"><a class="navbar-link" href="index.html#intro">Intro</a></li>
         <li class="navbar-item">
@@ -89,22 +104,10 @@
             <ul class="popover-list">
               <li class="popover-item">
                 <a class="popover-link" href="index.html#microrusefi">microRusEFI</a>
-                </li>
-                <li class="popover-item">
-                  <a class="popover-link" href="index.html#proteus">Proteus</a>
-                </li>
-                <!--<li class="popover-item">
-                  <a class="popover-link" href="#buttons">Frankenstein</a>
-                </li>
-                <li class="popover-item">
-                  <a class="popover-link" href="#forms">Frankenso</a>
-                </li>
-                <li class="popover-item">
-                  <a class="popover-link" href="#lists">Hellen</a>
-                </li>
-                <li class="popover-item">
-                  <a class="popover-link" href="#code">Prometheus</a>
-                </li> -->
+              </li>
+              <li class="popover-item">
+                <a class="popover-link" href="index.html#proteus">Proteus</a>
+              </li>
             </ul>
           </div>
         </li>
@@ -118,18 +121,6 @@
               <li class="popover-item">
                 <a class="popover-link" href="https://github.com/rusefi/rusefi/wiki/Proteus-Manual">Proteus</a>
               </li>
-              <!-- <li class="popover-item">
-                <a class="popover-link" href="https://github.com/rusefi/rusefi/wiki">Other</a>
-              </li> -->
-              <!--<li class="popover-item">
-                <a class="popover-link" href="#buttons">Frankenstein</a>
-              </li>
-              <li class="popover-item">
-                <a class="popover-link" href="#lists">Hellen</a>
-              </li>
-              <li class="popover-item">
-                <a class="popover-link" href="#code">Prometheus</a>
-              </li> -->
             </ul>
           </div>
         </li>
@@ -216,16 +207,19 @@
             <td class='oddrow'><i class="fa fa-check-circle-o fa-2x" aria-hidden="true"></i></td>
           </tr>
           <tr>
-            <td class='evenrow'><a href='https://github.com/rusefi/rusefi/wiki/All-Supported-Triggers'>20+ OEM triggers supported</a></td>
+            <td class='evenrow'><a href='https://github.com/rusefi/rusefi/wiki/All-Supported-Triggers'>20+ OEM triggers
+                supported</a></td>
             <td class='evenrow'><i class="fa fa-check-circle-o fa-2x" aria-hidden="true"></i></td>
           </tr>
           <tr>
             <td class='oddrow'>Automatic Transmission Control</td>
-            <td class='oddrow'><i class="fa fa-check-circle-o fa-2x" aria-hidden="true" style="color:rgba(0, 0, 0, 0.3);"></i></td>
+            <td class='oddrow'><i class="fa fa-check-circle-o fa-2x" aria-hidden="true"
+                style="color:rgba(0, 0, 0, 0.3);"></i></td>
           </tr>
           <tr>
             <td class='evenrow'><a href='https://github.com/rusefi/rusefi/wiki/GDI-status'>Direct Injection</a></td>
-            <td class='evenrow'><i class="fa fa-check-circle-o fa-2x" aria-hidden="true" style="color:rgba(0, 0, 0, 0.3);"></i></td>
+            <td class='evenrow'><i class="fa fa-check-circle-o fa-2x" aria-hidden="true"
+                style="color:rgba(0, 0, 0, 0.3);"></i></td>
           </tr>
           <tr>
             <td class='oddrow'>Flat Shifting</td>
@@ -280,7 +274,8 @@
         <li>SPI and TTL available on PCB</li>
       </ul>
       <a class="button button-primary" href="https://www.ebay.com/itm/333532119947">Get microRusEFI hardware</a>
-      <a class="button button-primary" href="https://github.com/rusefi/rusefi/wiki/microRusEFI-Manual">microRusEFI Manual</a>
+      <a class="button button-primary" href="https://github.com/rusefi/rusefi/wiki/microRusEFI-Manual">microRusEFI
+        Manual</a>
     </div>
   </div>
 
@@ -337,7 +332,8 @@
               <td><img src="images/site/52p_board_connector.jpg" width="250px" alt=""></td>
               <td>52 pin breakout board <br> 52 pin connector</td>
               <td><a class="button button-primary" href="https://www.ebay.com/itm/333749717058">Get it on eBay</a><br>
-                <a class="button button-primary" href="https://www.ebay.com/itm/333735826285">Get it on eBay</a></td>
+                <a class="button button-primary" href="https://www.ebay.com/itm/333735826285">Get it on eBay</a>
+              </td>
             </tr>
             <tr>
               <td><img src="images/site/55_board_with_connector.jpg" width="250px" alt=""></td>
@@ -387,7 +383,7 @@
               <td><img src="images/site/88_connector_2.5_rows.jpg" width="250px" alt=""></td>
               <td>88 pin connector</td>
               <td><a class="button button-primary" href="https://www.ebay.com/itm/333752255007">Get it on eBay</a> <br>
-<a class="button button-primary" href="https://www.ebay.com/itm/333833818007">Get it on eBay</a>
+                <a class="button button-primary" href="https://www.ebay.com/itm/333833818007">Get it on eBay</a>
               </td>
             </tr>
             <tr>
diff --git a/misc/www/js/site.js b/misc/www/js/site.js
index 93160a641e..3651a36a9c 100644
--- a/misc/www/js/site.js
+++ b/misc/www/js/site.js
@@ -1,3 +1,30 @@
+(function($) { // Begin jQuery
+  $(function() { // DOM ready
+    // If a link has a dropdown, add sub menu toggle.
+    $('topnav ul li a:not(:only-child)').click(function(e) {
+      $(this).siblings('.nav-dropdown').toggle();
+      // Close one dropdown when selecting another
+      $('.nav-dropdown').not($(this).siblings()).hide();
+      e.stopPropagation();
+    });
+    // Clicking away from dropdown will remove the dropdown class
+    $('html').click(function() {
+      $('.nav-dropdown').hide();
+    });
+    // Toggle open and close nav styles on click
+    $('#nav-toggle').click(function() {
+      $('topnav ul').slideToggle();
+    });
+    $('topnav a').click(function() {
+      $('topnav ul').slideToggle();
+    });
+    // Hamburger to X toggle
+    $('#nav-toggle').on('click', function() {
+      this.classList.toggle('active');
+    });
+  }); // end DOM ready
+})(jQuery); // end jQuery
+
 $(document).ready(function() {
 
     // Variables
@@ -23,7 +50,7 @@ $(document).ready(function() {
       $popoverLink.on('click', openPopover)
       $document.on('click', closePopover)
       $('a[href^="#"]').on('click', smoothScroll)
-      buildSnippets();
+      // buildSnippets();
     }
   
     function smoothScroll(e) {