Update banner (keystonejs#4993)

website/components/Navbar/index.js

@@ -93,7 +93,7 @@ const styles = {
 			left: 0,
 			overflowY: "auto",
 			paddingBottom: "3em",
-			position: "fixed",
+			position: "absolute",
 			top: 0,
 			width: theme.navbar.widthSmall
 		},

website/components/Version5.js

@@ -5,10 +5,8 @@ export default () => (
 	<div className={compose(styles.wrapper)}>
 		<div>
 			<p className={compose(styles.p)}>
-				If you're looking for the latest version of Keystone checkout{" "}
-				<a href="https://keystonejs.com/">Keystone 5</a>. Version 4 will
-				continue to receive critical updates but new users should choose version
-				5.
+				These are the version 4 docs. Looking for the{" "}
+				<a href="https://keystonejs.com/">latest version of Keystone</a>?
 			</p>
 		</div>
 	</div>
@@ -21,11 +19,11 @@ const styles = {
 		padding: "1rem",
 		display: "flex",
 		justifyContent: "center",
-		alignItems: "center"
+		alignItems: "center",
 	},
 	p: {
 		color: "#856404",
 		padding: 0,
-		margin: 0
-	}
+		margin: 0,
+	},
 };

website/templates/template-doc-layout.js

@@ -5,6 +5,7 @@ require("typeface-roboto");
 
 import Page from "./template-doc-page";
 import Navbar from "../components/Navbar";
+import Version5 from "../components/Version5";
 
 export default class DocumentLayout extends React.Component {
 	constructor(props) {
@@ -62,16 +63,19 @@ export default class DocumentLayout extends React.Component {
 
 		return (
 			<div>
-				<Navbar
-					items={this.getNavItems()}
-					pathname={this.props.location.pathname}
-				/>
-				<Page
-					body={body}
-					editPath={editPath}
-					siteTitle={siteTitle}
-					title={title}
-				/>
+				<Version5 />
+				<div style={{ position: "relative" }}>
+					<Navbar
+						items={this.getNavItems()}
+						pathname={this.props.location.pathname}
+					/>
+					<Page
+						body={body}
+						editPath={editPath}
+						siteTitle={siteTitle}
+						title={title}
+					/>
+				</div>
 			</div>
 		);
 	}