diff --git a/includes/templates/Header.mustache b/includes/templates/Header.mustache
index 981d8f292..5a903ee8e 100644
--- a/includes/templates/Header.mustache
+++ b/includes/templates/Header.mustache
@@ -5,6 +5,10 @@
 }}
 
 <div id="header">
+	<label for="sidebar-hide-checkbox" class="mw-ui-icon-sidebar">
+		<span class="speech-only"> Toggle Sidebar </span>
+	</label>
+
 	<div id="p-logo" role="banner">
 		<a {{{html-logo-attributes}}}>
 			<span class="logo-globe {{{html-logo-class}}}"></span>
diff --git a/includes/templates/PageLayout.mustache b/includes/templates/PageLayout.mustache
index 9d6fc0712..17b470f81 100644
--- a/includes/templates/PageLayout.mustache
+++ b/includes/templates/PageLayout.mustache
@@ -13,6 +13,8 @@
 
 {{{html-headelement}}}
 
+<input id="sidebar-hide-checkbox" type="checkbox" class="hidden">
+
 <div class="main">
 	<div id="mw-head-base" class="noprint content-margin"></div>
 
diff --git a/resources/skins.vector.styles/Header.less b/resources/skins.vector.styles/Header.less
index eddfb7c88..b2f57dd54 100644
--- a/resources/skins.vector.styles/Header.less
+++ b/resources/skins.vector.styles/Header.less
@@ -76,3 +76,14 @@
 		background-repeat: no-repeat;
 	}
 }
+
+// == Sidebar toggle ==
+
+.mw-ui-icon-sidebar {
+	margin: auto 0.7em;
+	width: 25px;
+	height: 25px;
+	background-image: url( ../static/hamburger.7cec498b.svg );
+	background-size: contain;
+	background-repeat: no-repeat;
+}
diff --git a/resources/skins.vector.styles/PageLayout.less b/resources/skins.vector.styles/PageLayout.less
index b4b7965ec..9f3881d94 100644
--- a/resources/skins.vector.styles/PageLayout.less
+++ b/resources/skins.vector.styles/PageLayout.less
@@ -32,10 +32,18 @@
 	margin: 0 auto;
 }
 
+.main {
+	position: relative;
+	// Placeholder margin for sidebar if #sidebar-hide-checkbox is unchecked.
+	margin-left: @width-sidebar + @margin-content;
+}
+
 @media ( max-width: 1400px ) {
-	#mw-data-after-content,
-	.content-margin {
-		margin-left: @width-sidebar + @margin-content;
+	#sidebar-hide-checkbox:checked {
+		~ .main {
+			// Remove placeholder margin for sidebar if #sidebar-hide-checkbox is checked.
+			margin-left: 0;
+		}
 	}
 }
 
@@ -62,6 +70,16 @@
 
 	.vertical-gradient( @background-color-base, @background-color-secondary, 0%, 10% );
 	.box-shadow( 0 10px 15px -5px rgba(0, 0, 0, 0.15) );
+
+	// Moved in the viewport if #sidebar-hide-checkbox unchecked.
+	.transform( translateX( 0 ) );
+}
+
+#sidebar-hide-checkbox:checked {
+	~ #mw-panel {
+		// Moved out to the left if #sidebar-hide-checkbox is checked.
+		.transform( translateX( -@width-sidebar ) );
+	}
 }
 
 // == Hide empty portlets ==
diff --git a/resources/static/hamburger.7cec498b.svg b/resources/static/hamburger.7cec498b.svg
new file mode 100644
index 000000000..2b48b2c88
--- /dev/null
+++ b/resources/static/hamburger.7cec498b.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><title>menu</title><path fill="#4a4f53" d="M1 3v2h18V3zm0 8h18V9H1zm0 6h18v-2H1z"/></svg>
\ No newline at end of file