diff --git a/tools/jsdoc/hifi-jsdoc-template/static/styles/main.css b/tools/jsdoc/hifi-jsdoc-template/static/styles/main.css
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/tools/jsdoc/hifi-jsdoc-template/static/styles/responsive.css b/tools/jsdoc/hifi-jsdoc-template/static/styles/responsive.css
new file mode 100644
index 0000000000..cc730818b6
--- /dev/null
+++ b/tools/jsdoc/hifi-jsdoc-template/static/styles/responsive.css
@@ -0,0 +1,17 @@
+.nav-header {
+	display: none;
+}
+
+nav {
+	display: none !important;
+}
+
+section {
+	margin-right: 0px !important;
+}
+
+#main {
+	margin-left: 15px !important;
+	margin-right: 15px !important;
+	overflow: auto;
+}
\ No newline at end of file
diff --git a/tools/jsdoc/hifi-jsdoc-template/tmpl/layout.tmpl b/tools/jsdoc/hifi-jsdoc-template/tmpl/layout.tmpl
index 7093109ae1..76262ec499 100644
--- a/tools/jsdoc/hifi-jsdoc-template/tmpl/layout.tmpl
+++ b/tools/jsdoc/hifi-jsdoc-template/tmpl/layout.tmpl
@@ -4,10 +4,10 @@
     <?js if (!env.conf.docdash) { env.conf.docdash = {};} ?>
     <meta charset="utf-8">
     <title><?js= title ?></title>
-	
-	<script src="scripts/vue.min.js"></script>
-	<script src="scripts/vuetify.js"></script>
-    
+
+    <script src="scripts/vue.min.js"></script>
+    <script src="scripts/vuetify.js"></script>
+
     <script src="scripts/prettify/prettify.js"></script>
     <script src="scripts/prettify/lang-css.js"></script>
     <!--[if lt IE 9]>
@@ -15,55 +15,68 @@
     <![endif]-->
     <link type="text/css" rel="stylesheet" href="styles/prettify.css">
     <link type="text/css" rel="stylesheet" href="styles/jsdoc.css">
-	<link type="text/css" rel="stylesheet" href="styles/night.css">
-	<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
-	<link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp" rel="stylesheet">
-	<link href="styles/materialdesignicons.min.css" rel="stylesheet">
-	<link href="styles/vuetify.css" rel="stylesheet">
-	<style>
-		.v-application--wrap {
-			min-height: 0 !important;
-		}
-		
-		/** Override Vue CSS. */
-		.theme--dark.v-application {
-			background: #27343b !important;
-		}
-	</style>
-	<script>
-	//We are running the check here to preload the theme because it may load the incorrect one first for a split second.
-		var darkDisabled = JSON.parse(localStorage.getItem('darkDisabled'));
-		if (darkDisabled == null) {
-			localStorage.setItem('darkDisabled', JSON.stringify(false));
-		} else {
-			var nightSheet = document.querySelector('[href="styles/night.css"]');
-			nightSheet.disabled = darkDisabled;
-		}
-	</script>
-	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
+    <link type="text/css" rel="stylesheet" href="styles/night.css">
+    <link type="text/css" rel="stylesheet" href="styles/responsive.css">
+    <link type="text/css" rel="stylesheet" href="styles/main.css">
+    <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp" rel="stylesheet">
+    <link href="styles/materialdesignicons.min.css" rel="stylesheet">
+    <link href="styles/vuetify.css" rel="stylesheet">
+    <style>
+        .v-application--wrap {
+            min-height: 0 !important;
+        }
+
+        /** Override Vue CSS. */
+        .theme--dark.v-application {
+            background: #27343b !important;
+        }
+    </style>
+    <script>
+    //We are running the check here to preload the theme because it may load the incorrect one first for a split second.
+    var darkDisabled = JSON.parse(localStorage.getItem('darkDisabled'));
+    if (darkDisabled == null) {
+        localStorage.setItem('darkDisabled', JSON.stringify(false));
+    } else {
+        var nightSheet = document.querySelector('[href="styles/night.css"]');
+        nightSheet.disabled = darkDisabled;
+    }
+
+    var responsiveDisabled = JSON.parse(localStorage.getItem('responsiveDisabled'));
+    if (responsiveDisabled === null) {
+        localStorage.setItem('responsiveDisabled', JSON.stringify(true));
+    } else {
+        var responsiveSheet = document.querySelector('[href="styles/responsive.css"]');
+        responsiveSheet.disabled = responsiveDisabled;
+    }
+    </script>
+    <!-- <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"> -->
     <link href="images/fav-icon.ico" rel="shortcut icon">
 </head>
 <body>
-
-<div class="nav-header">
-    <p><a href="https://projectathena.io"><img src="images/project-athena-logo.png" width="214px" /></a></p>
-    <?js if (env.conf.docdash.search) { ?>
-    <input type="text" class="search-input" id="nav-search" placeholder="Search API Docs ..." />
-    <?js } ?>
-    <p><a href="https://docs.projectathena.dev">Looking for <strong>Project Athena</strong><br /> Documentation?</a></p>
-	<div id="app">
-		<v-app dark>
-			<v-btn @click="toggleNightMode" text dark>
-				Toggle
-				<v-icon class="ml-2">mdi-theme-light-dark</v-icon>
-			</v-btn>
-		</v-app>
+<v-app dark>
+	<div id="vue-menu">
+		<template>
+		<v-btn @click="toggleResponsive" fab large dark style="position: fixed; right: 15px; top: 15px;">
+			<v-icon class="ml-4">mdi-backburger</v-icon>
+		</v-btn>
+			<div class="nav-header">
+			    <p><a href="https://projectathena.io"><img src="images/project-athena-logo.png" width="214px" /></a></p>
+			    <?js if (env.conf.docdash.search) { ?>
+			    <input type="text" class="search-input" id="nav-search" placeholder="Search API Docs ..." />
+			    <?js } ?>
+			    <p><a href="https://docs.projectathena.dev">Looking for <strong>Project Athena</strong><br /> Documentation?</a></p>
+				<v-btn @click="toggleNightMode" text dark>
+					<span>Toggle</span>
+					<v-icon style="margin-left: 5px;">mdi-theme-light-dark</v-icon>
+				</v-btn>
+			</div>
+			<nav>
+			    <?js= this.nav ?>
+			</nav>
+		</template>
 	</div>
-</div>
-
-<nav>
-    <?js= this.nav ?>
-</nav>
+</v-app>
 
 <div id="main">
     <h1 class="page-title"><?js= title ?></h1>
@@ -109,30 +122,38 @@
 <?js } ?>
 
 <script>
-	new Vue({
-		el: '#app',
-		vuetify: new Vuetify({
-			theme: {
-				dark: true,
-			},
-		}),
-		data: () => ({
+    new Vue({
+        el: '#vue-menu',
+        vuetify: new Vuetify({
+            theme: {
+            	dark: true,
+            },
+        }),
+        data: () => ({
 
-		}),
-		created: function () {
-			
-		},
-		methods: {
-			toggleNightMode: function() {
-				var darkDisabled = JSON.parse(localStorage.getItem('darkDisabled'));
-				localStorage.setItem('darkDisabled', JSON.stringify(!darkDisabled));
-				darkDisabled = !darkDisabled;
-								
-				var nightSheet = document.querySelector('[href="styles/night.css"]');
-				nightSheet.disabled = darkDisabled;
-			}
-		},
-	})
+        }),
+        created: function () {
+
+        },
+        methods: {
+            toggleNightMode: function() {
+                var darkDisabled = JSON.parse(localStorage.getItem('darkDisabled'));
+                localStorage.setItem('darkDisabled', JSON.stringify(!darkDisabled));
+                darkDisabled = !darkDisabled;
+
+                var nightSheet = document.querySelector('[href="styles/night.css"]');
+                nightSheet.disabled = darkDisabled;
+            },
+            toggleResponsive: function() {
+                var responsiveDisabled = JSON.parse(localStorage.getItem('responsiveDisabled'));
+                localStorage.setItem('responsiveDisabled', JSON.stringify(!responsiveDisabled));
+                responsiveDisabled = !responsiveDisabled;
+
+                var responsiveSheet = document.querySelector('[href="styles/responsive.css"]');
+                responsiveSheet.disabled = responsiveDisabled;
+            }
+        },
+    })
 </script>
 
 <!-- Start Google Analytics Tag -->