diff --git a/src/assets/css/components/i-page.css b/src/assets/css/components/i-page.css
index a3432d8..2eb35fb 100644
--- a/src/assets/css/components/i-page.css
+++ b/src/assets/css/components/i-page.css
@@ -6,36 +6,124 @@
 	font-size: 16px;
 }
 
-.i-page__sidebar {
+.i-page__mobile-toggle {
 	display: none;
+}
+
+.i-page__sidebar {
 	background: #0b7564;
 	color: #fff;
 }
+
 .i-page__sidebar > * {
 	padding: 0 20px;
 }
+
 .i-page__sidebar a {
 	color: inherit;
 }
+
 .i-page__content {
-	padding-top: 60px;
 	background: #f0f0f0;
 }
 
-.i-nav-select {
-	position: fixed;
-	z-index: 100;
-	top: 0;
-	width: 100%;
-	min-height: 60px;
-	margin: 0;
-	padding: 10px 20px;
-	padding-right: 145px;
-	background: #f0f0f0;
-}
+@media (max-width: 991px) {
+	.i-page__mobile-toggle {
+		display: block;
+		position: fixed;
+		top: 20px;
+		right: 20px;
+		z-index: 99;
+	}
+
+	.i-page__mobile-toggle .icon {
+		width: 60px;
+		height: 45px;
+		position: relative;
+		cursor: pointer;
+	}
+
+	.i-page__mobile-toggle .icon span {
+		display: block;
+		position: absolute;
+		height: 9px;
+		width: 100%;
+		background-color: #000;
+		border-radius: 9px;
+		opacity: 1;
+		left: 0;
+		-webkit-transform: rotate(0deg);
+		-moz-transform: rotate(0deg);
+		-o-transform: rotate(0deg);
+		transform: rotate(0deg);
+		-webkit-transition: .25s ease-in-out;
+		-moz-transition: .25s ease-in-out;
+		-o-transition: .25s ease-in-out;
+		transition: .25s ease-in-out;
+	}
+
+	.i-page__mobile-toggle .icon span:nth-child(1) {
+		top: 0px;
+	}
+
+	.i-page__mobile-toggle .icon span:nth-child(2),
+	.i-page__mobile-toggle .icon span:nth-child(3) {
+		top: 18px;
+	}
+
+	.i-page__mobile-toggle .icon span:nth-child(4) {
+		top: 36px;
+	}
 
-.i-nav-select select {
-	padding: 0;
+	.i-page__mobile-toggle .icon.open span {
+		background-color: #FFF;
+	}
+
+	.i-page__mobile-toggle .icon.open span:nth-child(1) {
+		top: 18px;
+		width: 0%;
+		left: 50%;
+	}
+
+	.i-page__mobile-toggle .icon.open span:nth-child(2) {
+		-webkit-transform: rotate(45deg);
+		-moz-transform: rotate(45deg);
+		-o-transform: rotate(45deg);
+		transform: rotate(45deg);
+	}
+
+	.i-page__mobile-toggle .icon.open span:nth-child(3) {
+		-webkit-transform: rotate(-45deg);
+		-moz-transform: rotate(-45deg);
+		-o-transform: rotate(-45deg);
+		transform: rotate(-45deg);
+	}
+
+	.i-page__mobile-toggle .icon.open span:nth-child(4) {
+		top: 18px;
+		width: 0%;
+		left: 50%;
+	}
+
+	.i-page__sidebar {
+		position: fixed;
+		top: 0;
+		left: 0;
+		width: 100vw;
+		height: 100vh;
+		transform: translateX(-100vw);
+		transition: transform .25s ease-in-out;
+	}
+
+	.i-page__sidebar.visible {
+		transform: translateX(0);
+	}
+
+	.i-page__sidebar.visible .theme-sidebar-categories {
+		overflow-y: auto;
+		height: 300px; /* default height */
+		margin-bottom: 15px;
+	}
 }
 
 @media (min-width: 992px) {
@@ -60,4 +148,4 @@
 	.i-nav-select {
 		display: none;
 	}
-}
+}
\ No newline at end of file
diff --git a/src/assets/js/app.js b/src/assets/js/app.js
index f0a5112..ff9ade4 100644
--- a/src/assets/js/app.js
+++ b/src/assets/js/app.js
@@ -101,12 +101,6 @@
 			});
 		});
 
-		// Mobile nav select
-		$('.i-nav-select').change(function() {
-			var slug = $(this).find('option:selected').val();
-			window.location.hash = slug;
-		});
-
 		// Code block toggle
 		$('.i-code-block__lang.-collapsible').click(function() {
 			var $lang = $(this);
@@ -114,5 +108,46 @@
 			$lang.siblings('.i-code-block__content').toggleClass('hidden');
 		});
 
+		// Mobile menu toggle
+		var menuOpen = false;
+
+		function calculateMobileMenuHeight() {
+			var $categories = $('.i-page__sidebar > .theme-sidebar-categories');
+			if ($(window).width() < 992 && menuOpen) {
+				var $rect = $categories[0].getBoundingClientRect();
+				var $height = $(window).height() - Math.ceil($rect.top) - 50;
+				$categories[0].style.height = $height + 'px';
+			} else {
+				$categories[0].style.height = '';
+			}
+		}
+
+		function toggleMobileMenu() {
+			if (menuOpen) {
+				$('.i-page__sidebar').toggleClass('visible');
+				$('.i-page__mobile-toggle > .icon').toggleClass('open');
+			} else {
+				$('.i-page__sidebar').removeClass('visible');
+				$('.i-page__mobile-toggle > .icon').removeClass('open');
+				var $categories = $('.i-page__sidebar > .theme-sidebar-categories');
+			}
+			calculateMobileMenuHeight();
+		}
+
+		$(window).resize(function() {
+			calculateMobileMenuHeight();
+		})
+
+		$('.i-page__mobile-toggle').click(function() {
+			menuOpen = !menuOpen;
+			toggleMobileMenu();
+		});
+
+		// Hide mobile menu when clicking sidebar items
+		$('.i-sidebar-list-item').click(function() {
+			menuOpen = false;
+			toggleMobileMenu();
+		});
+
 	});
 })(jQuery);
diff --git a/src/templates/index.handlebars b/src/templates/index.handlebars
index 9e55e8b..7bf11e9 100644
--- a/src/templates/index.handlebars
+++ b/src/templates/index.handlebars
@@ -18,22 +18,16 @@
 		{{/each}}
 	</head>
 	<body class="overflow-x-off i-page theme-page">
-		<div class="i-page__content theme-content">
-
-			<div class="i-nav-select theme-mobile-nav">
-				<form class="form">
-					<select class="form-control form-control-lg theme-mobile-nav-select">
-						<option disabled selected>Go to…</option>
-						{{#each groups}}
-							<optgroup label="{{key}}">
-								{{#each docs}}
-									<option value="{{slug}}">{{{name}}}</option>
-								{{/each}}
-							</optgroup>
-						{{/each}}
-					</select>
-				</form>
+		<div class="i-page__mobile-toggle">
+			<div class="icon">
+				<span></span>
+				<span></span>
+				<span></span>
+				<span></span>
 			</div>
+		</div>
+
+		<div class="i-page__content theme-content">
 
 			{{#each groups}}
 				<div id="category-{{slug}}" class="theme-content-category">