diff --git a/src/librustdoc/html/static/css/rustdoc.css b/src/librustdoc/html/static/css/rustdoc.css
index 5d33681847a41..1ecce5347d9a5 100644
--- a/src/librustdoc/html/static/css/rustdoc.css
+++ b/src/librustdoc/html/static/css/rustdoc.css
@@ -110,7 +110,6 @@ body {
 	font: 16px/1.4 "Source Serif 4", "Noto Sans KR", serif;
 	margin: 0;
 	position: relative;
-	padding: 10px 15px 20px 15px;
 
 	-webkit-font-feature-settings: "kern", "liga";
 	-moz-font-feature-settings: "kern", "liga";
@@ -236,6 +235,32 @@ textarea {
 
 /* end tweaks for normalize.css 8 */
 
+.rustdoc {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: nowrap;
+}
+
+main {
+	position: relative;
+	flex-grow: 1;
+	padding: 10px 15px 40px 45px;
+	min-width: 0;
+}
+
+.source main {
+	padding: 15px;
+}
+
+.main-inner {
+	max-width: 960px;
+	margin-right: auto;
+}
+
+.source .main-inner {
+	max-width: unset;
+}
+
 details:not(.rustdoc-toggle) summary {
 	margin-bottom: .6em;
 }
@@ -270,24 +295,76 @@ li {
 }
 
 .source .content {
-	margin-top: 50px;
 	max-width: none;
 	overflow: visible;
 	margin-left: 0px;
 }
 
 nav.sub {
+	position: relative;
 	font-size: 16px;
 	text-transform: uppercase;
 }
 
+.sub-container {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: nowrap;
+}
+
+.sub-logo-container {
+	display: none;
+	margin-right: 20px;
+}
+
+.source .sub-logo-container {
+	display: block;
+}
+
+.source .sub-logo-container > img {
+	height: 60px;
+	width: 60px;
+	object-fit: contain;
+}
+
 .sidebar {
 	width: 200px;
-	position: fixed;
-	left: 0;
-	top: 0;
-	bottom: 0;
+	min-width: 200px;
+	height: 100vh;
 	overflow: auto;
+	position: sticky;
+	top: 0;
+	left: 0;
+}
+
+.source .sidebar {
+	width: 50px;
+	min-width: 0px;
+	max-width: 300px;
+	flex-grow: 0;
+	flex-shrink: 0;
+	flex-basis: auto;
+	border-right: 1px solid;
+	transition: width .5s;
+	overflow-x: hidden;
+	/* The sidebar is by default hidden  */
+	overflow-y: hidden;
+}
+
+.source .sidebar > *:not(:first-child) {
+	transition: opacity 0.5s, visibility 0.2s;
+	opacity: 0;
+	visibility: hidden;
+}
+
+.source .sidebar.expanded {
+	overflow-y: auto;
+	width: 300px !important;
+}
+
+.source .sidebar.expanded > * {
+	opacity: 1;
+	visibility: visible;
 }
 
 /* Improve the scrollbar display on firefox */
@@ -313,10 +390,6 @@ nav.sub {
 	margin-right: -10px;
 }
 
-.content, nav {
-	max-width: 960px;
-}
-
 /* Everything else */
 
 .hidden {
@@ -324,23 +397,15 @@ nav.sub {
 }
 
 .logo-container {
-	height: 100px;
-	width: 100px;
-	position: relative;
-	margin: 20px auto;
-	display: block;
+	display: flex;
 	margin-top: 10px;
+	margin-bottom: 10px;
+	justify-content: center;
 }
 
 .logo-container > img {
-	max-width: 100px;
-	max-height: 100px;
-	height: 100%;
-	position: absolute;
-	left: 50%;
-	top: 50%;
-	transform: translate(-50%, -50%);
-	display: block;
+	height: 100px;
+	width: 100px;
 }
 
 .sidebar .location {
@@ -420,10 +485,6 @@ nav.sub {
 	display: none;
 }
 
-.content {
-	padding: 15px 0;
-}
-
 .source .content pre.rust {
 	white-space: pre;
 	overflow: auto;
@@ -463,7 +524,6 @@ nav.sub {
 }
 
 #search {
-	margin-left: 230px;
 	position: relative;
 }
 
@@ -689,9 +749,13 @@ nav.sub {
 }
 
 nav:not(.sidebar) {
+	flex-grow: 1;
 	border-bottom: 1px solid;
 	padding-bottom: 10px;
-	margin-bottom: 10px;
+	margin-bottom: 25px;
+}
+.source nav:not(.sidebar).sub {
+	margin-left: 32px;
 }
 nav.main {
 	padding: 20px 0;
@@ -710,10 +774,6 @@ nav.main .separator {
 nav.sum { text-align: right; }
 nav.sub form { display: inline; }
 
-nav.sub, .content {
-	margin-left: 230px;
-}
-
 a {
 	text-decoration: none;
 	background: transparent;
@@ -788,6 +848,7 @@ h2.small-section-header > .anchor {
 
 .search-container {
 	position: relative;
+	max-width: 960px;
 }
 .search-container > div {
 	display: inline-flex;
@@ -1306,30 +1367,23 @@ pre.rust {
 }
 
 #sidebar-toggle {
-	position: fixed;
-	top: 30px;
-	left: 300px;
-	z-index: 10;
-	padding: 3px;
-	border-top-right-radius: 3px;
-	border-bottom-right-radius: 3px;
+	position: sticky;
+	top: 0;
+	left: 0;
 	cursor: pointer;
 	font-weight: bold;
-	transition: left .5s;
 	font-size: 1.2em;
-	border: 1px solid;
-	border-left: 0;
+	border-bottom: 1px solid;
+	display: flex;
+	height: 40px;
+	justify-content: center;
+	align-items: center;
+	z-index: 10;
 }
 #source-sidebar {
-	position: fixed;
-	top: 0;
-	bottom: 0;
-	left: 0;
 	width: 300px;
 	z-index: 1;
 	overflow: auto;
-	transition: left .5s;
-	border-right: 1px solid;
 }
 #source-sidebar > .title {
 	font-size: 1.5em;
@@ -1340,8 +1394,8 @@ pre.rust {
 
 .theme-picker {
 	position: absolute;
-	left: 211px;
-	top: 19px;
+	left: -34px;
+	top: 9px;
 }
 
 .theme-picker button {
@@ -1657,16 +1711,44 @@ details.undocumented[open] > summary::before {
 		padding-top: 0px;
 	}
 
-	.rustdoc > .sidebar {
+	main {
+		padding-left: 15px;
+		padding-top: 0px;
+	}
+
+	.rustdoc {
+		flex-direction: column;
+	}
+
+	.rustdoc:not(.source) > .sidebar {
+		width: 100%;
 		height: 45px;
 		min-height: 40px;
+		max-height: 45px;
 		margin: 0;
-		margin-left: -15px;
 		padding: 0 15px;
 		position: static;
 		z-index: 11;
 	}
 
+	.rustdoc.source > .sidebar {
+		position: fixed;
+		top: 0;
+		left: 0;
+		margin: 0;
+		z-index: 11;
+		width: 0;
+	}
+
+	.sidebar.mobile {
+		position: sticky !important;
+		top: 0;
+		left: 0;
+		width: 100%;
+		margin-left: 0;
+		background-color: rgba(0,0,0,0);
+	}
+
 	.sidebar > .location {
 		float: right;
 		margin: 0px;
@@ -1682,7 +1764,7 @@ details.undocumented[open] > summary::before {
 		padding: 0;
 	}
 
-	.sidebar .logo-container {
+	.rustdoc:not(.source) .sidebar .logo-container {
 		width: 35px;
 		height: 35px;
 		margin-top: 5px;
@@ -1752,20 +1834,25 @@ details.undocumented[open] > summary::before {
 
 	nav.sub {
 		width: calc(100% - 32px);
-		float: right;
+		margin-left: 32px;
+		margin-bottom: 10px;
+	}
+
+	.source nav:not(.sidebar).sub {
+		margin-left: 32px;
 	}
 
 	.content {
 		margin-left: 0px;
 	}
 
-	#main, #search {
-		margin-top: 45px;
-		padding: 0;
+	.source .content {
+		margin-top: 10px;
 	}
 
 	#search {
 		margin-left: 0;
+		padding: 0;
 	}
 
 	.anchor {
@@ -1773,8 +1860,6 @@ details.undocumented[open] > summary::before {
 	}
 
 	.theme-picker {
-		left: 10px;
-		top: 54px;
 		z-index: 1;
 	}
 
@@ -1793,25 +1878,6 @@ details.undocumented[open] > summary::before {
 		height: 50px;
 	}
 
-	.sidebar.mobile {
-		position: fixed;
-		width: 100%;
-		margin-left: 0;
-		background-color: rgba(0,0,0,0);
-		height: 100%;
-	}
-	/*
-	This allows to prevent the version text to overflow the sidebar title on mobile mode when the
-	sidebar is displayed (after clicking on the "hamburger" button).
-	*/
-	.sidebar.mobile > div.version {
-		overflow: hidden;
-		max-height: 33px;
-	}
-	.sidebar {
-		width: calc(100% + 30px);
-	}
-
 	.show-it, .sidebar-elems:focus-within {
 		z-index:  2;
 		left: 0;
@@ -1858,12 +1924,25 @@ details.undocumented[open] > summary::before {
 		margin: 10px;
 	}
 
-	#sidebar-toggle {
+	.sidebar.expanded #sidebar-toggle {
+		font-size: 1.5rem;
+	}
+
+	.sidebar:not(.expanded) #sidebar-toggle {
+		position: fixed;
+		left: 1px;
 		top: 100px;
 		width: 30px;
 		font-size: 1.5rem;
 		text-align: center;
 		padding: 0;
+		z-index: 10;
+		border-top-right-radius: 3px;
+		border-bottom-right-radius: 3px;
+		cursor: pointer;
+		font-weight: bold;
+		border: 1px solid;
+		border-left: 0;
 	}
 
 	#source-sidebar {
@@ -1924,13 +2003,6 @@ details.undocumented[open] > summary::before {
 		height: 73px;
 	}
 
-	/* This is to prevent the search bar from being underneath the <section>
-	 * element following it.
-	 */
-	#main, #search {
-		margin-top: 100px;
-	}
-
 	#main > table:not(.table-display) td {
 		word-break: break-word;
 		width: 50%;
@@ -1969,4 +2041,17 @@ details.undocumented[open] > summary::before {
 	.docblock {
 		margin-left: 12px;
 	}
+
+	.sub-container {
+		flex-direction: column;
+	}
+
+	.sub-logo-container {
+		align-self: center;
+	}
+
+	.source .sub-logo-container > img {
+		height: 35px;
+		width: 35px;
+	}
 }
diff --git a/src/librustdoc/html/static/css/themes/ayu.css b/src/librustdoc/html/static/css/themes/ayu.css
index 0fd6462a8f5dd..68faaac3f37d3 100644
--- a/src/librustdoc/html/static/css/themes/ayu.css
+++ b/src/librustdoc/html/static/css/themes/ayu.css
@@ -61,7 +61,7 @@ pre, .rustdoc.source .example-wrap {
 	background-color: #14191f;
 }
 
-.logo-container.rust-logo > img {
+.rust-logo > img {
 	filter: drop-shadow(1px 0 0px #fff)
 		drop-shadow(0 1px 0 #fff)
 		drop-shadow(-1px 0 0 #fff)
@@ -97,7 +97,7 @@ pre, .rustdoc.source .example-wrap {
 }
 
 .source .sidebar {
-	background-color: #0f1419;
+	background-color: #14191f;
 }
 
 .sidebar .location {
diff --git a/src/librustdoc/html/static/css/themes/dark.css b/src/librustdoc/html/static/css/themes/dark.css
index d863701dd73c7..63195fe2b8b82 100644
--- a/src/librustdoc/html/static/css/themes/dark.css
+++ b/src/librustdoc/html/static/css/themes/dark.css
@@ -32,7 +32,7 @@ pre, .rustdoc.source .example-wrap {
 	background-color: #505050;
 }
 
-.logo-container.rust-logo > img {
+.rust-logo > img {
 	filter: drop-shadow(1px 0 0px #fff)
 		drop-shadow(0 1px 0 #fff)
 		drop-shadow(-1px 0 0 #fff)
@@ -66,7 +66,7 @@ pre, .rustdoc.source .example-wrap {
 }
 
 .source .sidebar {
-	background-color: #353535;
+	background-color: #565656;
 }
 
 .sidebar .location {
diff --git a/src/librustdoc/html/static/css/themes/light.css b/src/librustdoc/html/static/css/themes/light.css
index 28d2e99a3d073..7ef0d0f97d114 100644
--- a/src/librustdoc/html/static/css/themes/light.css
+++ b/src/librustdoc/html/static/css/themes/light.css
@@ -43,7 +43,7 @@ pre, .rustdoc.source .example-wrap {
 	scrollbar-color: rgba(36, 37, 39, 0.6) #d9d9d9;
 }
 
-.logo-container.rust-logo > img {
+.rust-logo > img {
 	/* No need for a border in here! */
 }
 
@@ -66,7 +66,7 @@ pre, .rustdoc.source .example-wrap {
 }
 
 .source .sidebar {
-	background-color: #fff;
+	background-color: #f1f1f1;
 }
 
 .sidebar .location {
diff --git a/src/librustdoc/html/static/js/main.js b/src/librustdoc/html/static/js/main.js
index e396fd9d288db..8691a7de39037 100644
--- a/src/librustdoc/html/static/js/main.js
+++ b/src/librustdoc/html/static/js/main.js
@@ -971,7 +971,7 @@ function hideThemeButtonState() {
         container.appendChild(rustdoc_version);
 
         popup.appendChild(container);
-        insertAfter(popup, searchState.outputElement());
+        insertAfter(popup, document.querySelector("main"));
         // So that it's only built once and then it'll do nothing when called!
         buildHelperPopup = function() {};
     };
diff --git a/src/librustdoc/html/static/js/source-script.js b/src/librustdoc/html/static/js/source-script.js
index 4d9a59f836b9e..fb30bf79a6d24 100644
--- a/src/librustdoc/html/static/js/source-script.js
+++ b/src/librustdoc/html/static/js/source-script.js
@@ -77,16 +77,14 @@ function createDirEntry(elem, parent, fullPath, currentFile, hasFoundFile) {
 }
 
 function toggleSidebar() {
-    var sidebar = document.getElementById("source-sidebar");
-    var child = this.children[0].children[0];
+    var sidebar = document.querySelector("nav.sidebar");
+    var child = this.children[0];
     if (child.innerText === ">") {
-        sidebar.style.left = "";
-        this.style.left = "";
+        sidebar.classList.add("expanded");
         child.innerText = "<";
         updateLocalStorage("rustdoc-source-sidebar-show", "true");
     } else {
-        sidebar.style.left = "-300px";
-        this.style.left = "0";
+        sidebar.classList.remove("expanded");
         child.innerText = ">";
         updateLocalStorage("rustdoc-source-sidebar-show", "false");
     }
@@ -97,20 +95,15 @@ function createSidebarToggle() {
     sidebarToggle.id = "sidebar-toggle";
     sidebarToggle.onclick = toggleSidebar;
 
-    var inner1 = document.createElement("div");
-    inner1.style.position = "relative";
+    var inner = document.createElement("div");
 
-    var inner2 = document.createElement("div");
-    inner2.style.paddingTop = "3px";
     if (getCurrentValue("rustdoc-source-sidebar-show") === "true") {
-        inner2.innerText = "<";
+        inner.innerText = "<";
     } else {
-        inner2.innerText = ">";
-        sidebarToggle.style.left = "0";
+        inner.innerText = ">";
     }
 
-    inner1.appendChild(inner2);
-    sidebarToggle.appendChild(inner1);
+    sidebarToggle.appendChild(inner);
     return sidebarToggle;
 }
 
@@ -120,7 +113,7 @@ function createSourceSidebar() {
     if (!window.rootPath.endsWith("/")) {
         window.rootPath += "/";
     }
-    var main = document.getElementById("main");
+    var main = document.querySelector("nav.sidebar");
 
     var sidebarToggle = createSidebarToggle();
     main.insertBefore(sidebarToggle, main.firstChild);
@@ -128,7 +121,9 @@ function createSourceSidebar() {
     var sidebar = document.createElement("div");
     sidebar.id = "source-sidebar";
     if (getCurrentValue("rustdoc-source-sidebar-show") !== "true") {
-        sidebar.style.left = "-300px";
+        main.classList.remove("expanded");
+    } else {
+        main.classList.add("expanded");
     }
 
     var currentFile = getCurrentFilePath();
@@ -144,7 +139,7 @@ function createSourceSidebar() {
                                       currentFile, hasFoundFile);
     });
 
-    main.insertBefore(sidebar, main.firstChild);
+    main.insertBefore(sidebar, document.querySelector(".sidebar-logo").nextSibling);
     // Focus on the current file in the source files sidebar.
     var selected_elem = sidebar.getElementsByClassName("selected")[0];
     if (typeof selected_elem !== "undefined") {
diff --git a/src/librustdoc/html/templates/page.html b/src/librustdoc/html/templates/page.html
index 38dc3b30e72ac..c43f75e5f65a4 100644
--- a/src/librustdoc/html/templates/page.html
+++ b/src/librustdoc/html/templates/page.html
@@ -54,53 +54,68 @@
     {{- layout.external_html.before_content | safe -}}
     <nav class="sidebar"> {#- -#}
         <div class="sidebar-menu" role="button">&#9776;</div> {#- -#}
-        <a href='{{page.root_path | safe}}{{krate_with_trailing_slash | safe}}index.html'> {#- -#}
+        <a class="sidebar-logo" href='{{page.root_path | safe}}{{krate_with_trailing_slash | safe}}index.html'> {#- -#}
             <div class='logo-container rust-logo'> {#- -#}
-            <img src='
-                {%- if layout.logo -%}
-                {{layout.logo}}
-                {%- else -%}
-                {{static_root_path | safe}}rust-logo{{page.resource_suffix}}.png
-                {%- endif -%}
-                ' alt='logo'> {#- -#}
+                <img src='
+                    {%- if layout.logo -%}
+                    {{layout.logo}}
+                    {%- else -%}
+                    {{static_root_path | safe}}rust-logo{{page.resource_suffix}}.png
+                    {%- endif -%}
+                    ' alt='logo'> {#- -#}
             </div> {#- -#}
         </a> {#- -#}
         {{- sidebar | safe -}}
     </nav> {#- -#}
-    <div class="theme-picker"> {#- -#}
-        <button id="theme-picker" aria-label="Pick another theme!" aria-haspopup="menu" title="themes"> {#- -#}
-            <img width="18" height="18" alt="Pick another theme!" {# -#}
-             src="{{static_root_path | safe}}brush{{page.resource_suffix}}.svg"> {#- -#}
-        </button> {#- -#}
-        <div id="theme-choices" role="menu"></div> {#- -#}
-    </div> {#- -#}
-    <nav class="sub"> {#- -#}
-        <form class="search-form"> {#- -#}
-            <div class="search-container"> {#- -#}
-                <div>{%- if layout.generate_search_filter -%}
-                    <select id="crate-search"> {#- -#}
-                        <option value="All crates">All crates</option> {#- -#}
-                    </select> {#- -#}
-                    {%- endif -%}
-                    <input {# -#}
-                        class="search-input" {# -#}
-                        name="search" {# -#}
-                        disabled {# -#}
-                        autocomplete="off" {# -#}
-                        spellcheck="false" {# -#}
-                        placeholder="Click or press ‘S’ to search, ‘?’ for more options…" {# -#}
-                        type="search"> {#- -#}
-                </div> {#- -#}
-                <button type="button" id="help-button" title="help">?</button> {#- -#}
-                <a id="settings-menu" href="{{page.root_path | safe}}settings.html" title="settings"> {#- -#}
-                    <img width="18" height="18" alt="Change settings" {# -#}
-                         src="{{static_root_path | safe}}wheel{{page.resource_suffix}}.svg"> {#- -#}
+    <main> {#- -#}
+        <div class="main-inner"> {#- -#}
+            <div class="sub-container"> {#- -#}
+                <a class="sub-logo-container rust-logo" href='{{page.root_path | safe}}{{krate_with_trailing_slash | safe}}index.html'> {#- -#}
+                    <img src='
+                        {%- if layout.logo -%}
+                        {{layout.logo}}
+                        {%- else -%}
+                        {{static_root_path | safe}}rust-logo{{page.resource_suffix}}.png
+                        {%- endif -%}
+                        ' alt='logo'> {#- -#}
                 </a> {#- -#}
+                <nav class="sub"> {#- -#}
+                    <div class="theme-picker"> {#- -#}
+                        <button id="theme-picker" aria-label="Pick another theme!" aria-haspopup="menu" title="themes"> {#- -#}
+                            <img width="18" height="18" alt="Pick another theme!" {# -#}
+                             src="{{static_root_path | safe}}brush{{page.resource_suffix}}.svg"> {#- -#}
+                        </button> {#- -#}
+                        <div id="theme-choices" role="menu"></div> {#- -#}
+                    </div> {#- -#}
+                    <form class="search-form"> {#- -#}
+                        <div class="search-container"> {#- -#}
+                            <div>{%- if layout.generate_search_filter -%}
+                                <select id="crate-search"> {#- -#}
+                                    <option value="All crates">All crates</option> {#- -#}
+                                </select> {#- -#}
+                                {%- endif -%}
+                                <input {# -#}
+                                    class="search-input" {# -#}
+                                    name="search" {# -#}
+                                    disabled {# -#}
+                                    autocomplete="off" {# -#}
+                                    spellcheck="false" {# -#}
+                                    placeholder="Click or press ‘S’ to search, ‘?’ for more options…" {# -#}
+                                    type="search"> {#- -#}
+                            </div> {#- -#}
+                            <button type="button" id="help-button" title="help">?</button> {#- -#}
+                            <a id="settings-menu" href="{{page.root_path | safe}}settings.html" title="settings"> {#- -#}
+                                <img width="18" height="18" alt="Change settings" {# -#}
+                                     src="{{static_root_path | safe}}wheel{{page.resource_suffix}}.svg"> {#- -#}
+                            </a> {#- -#}
+                        </div> {#- -#}
+                    </form> {#- -#}
+                </nav> {#- -#}
             </div> {#- -#}
-        </form> {#- -#}
-    </nav> {#- -#}
-    <section id="main" class="content">{{- content | safe -}}</section> {#- -#}
-    <section id="search" class="content hidden"></section> {#- -#}
+            <section id="main" class="content">{{- content | safe -}}</section> {#- -#}
+            <section id="search" class="content hidden"></section> {#- -#}
+        </div> {#- -#}
+    </main> {#- -#}
     {{- layout.external_html.after_content | safe -}}
     <div id="rustdoc-vars" {# -#}
          data-root-path="{{page.root_path | safe}}" {# -#}
diff --git a/src/test/rustdoc-gui/source-code-page.goml b/src/test/rustdoc-gui/source-code-page.goml
index 5a49807e180b2..34ee2d1c04f86 100644
--- a/src/test/rustdoc-gui/source-code-page.goml
+++ b/src/test/rustdoc-gui/source-code-page.goml
@@ -1,6 +1,6 @@
 goto: file://|DOC_PATH|/src/test_docs/lib.rs.html
 // Check that we can click on the line number.
-click: (40, 224) // This is the position of the span for line 4.
+click: (50, 196) // This is the position of the span for line 4.
 // Unfortunately, "#4" isn't a valid query selector, so we have to go around that limitation
 // by instead getting the nth span.
 assert-attribute: (".line-numbers > span:nth-child(4)", {"class": "line-highlighted"})