diff --git a/gulpfile.js b/gulpfile.js
index 000d4a2..29ecec2 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -36,6 +36,7 @@ const vuePublic = "resources/assets/js/app-vue.js";
 // Javascript files for the public site
 const jsPublic = [
     "resources/assets/js/site-vars.js",
+    "resources/assets/js/nav.js",
     "resources/assets/js/contact.js",
     "resources/assets/js/subscription.js",
     "resources/assets/js/app.js"
diff --git a/resources/assets/js/app.js b/resources/assets/js/app.js
index 2040c04..1ab70a2 100644
--- a/resources/assets/js/app.js
+++ b/resources/assets/js/app.js
@@ -1,5 +1,7 @@
 // run once the document is ready
 $(document).ready(function() {
+    navInit();
+
     switch (SiteVars.page) {
         case "":
             subscriptionFormInit();
diff --git a/resources/assets/js/nav.js b/resources/assets/js/nav.js
new file mode 100644
index 0000000..c56bf51
--- /dev/null
+++ b/resources/assets/js/nav.js
@@ -0,0 +1,6 @@
+// nav functionality
+function navInit() {
+    $(".nav-section-component-mobile-header-toggle").on("click", function() {
+        $(".nav-section-component-mobile-header-toggle, .nav-section-component-links").toggleClass("open");
+    });
+}
diff --git a/resources/views/sections/nav.blade.php b/resources/views/sections/nav.blade.php
index 5401a2e..7b6b33e 100644
--- a/resources/views/sections/nav.blade.php
+++ b/resources/views/sections/nav.blade.php
@@ -1,21 +1,21 @@
-<nav class="nav-section-component navbar navbar-default navbar-fixed-top">
-    <div class="container-fluid">
-        <div class="navbar-header">
-            <button type="button" id="navbar-toggle" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false" aria-controls="navbar">
-                <span class="sr-only">Toggle Navigation</span>
-                <span class="icon-bar"></span>
-                <span class="icon-bar"></span>
-                <span class="icon-bar"></span>
-            </button>
+<nav class="nav-section-component">
+    <div class="nav-section-component-mobile-header">
+        <button class="nav-section-component-mobile-header-toggle">
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+            <span class="sr-only">Toggle navigation</span>
+        </button>
+    </div>
 
-            <a class="navbar-logo" href="/"></a>
-        </div>
-
-        <div id="navbar-collapse" class="navbar-collapse collapse">
-            <ul class="nav navbar-nav navbar-right">
-                <li class="navlink"><a href="/" title="Home">Home</a></li>
-                <li class="navlink"><a href="/contact" title="Contact">Contact</a></li>
-            </ul>
+    <div class="nav-section-component-links" :class="{ open: openNav }">
+        <div class="nav-section-component-links-wrapper">
+            <a class="navlink" href="/"><span>Home</span></a>
+            <a class="navlink" href="/contact"><span>Contact</span></a>
         </div>
     </div>
+
+    <a class="nav-section-component-logo" href="/">
+        <img src="/img/logo.png" />
+    </a>
 </nav>