Header navigation support for multiple navigation items

Author: emilbaehr

_includes/header.html

@@ -1,4 +1,4 @@
-<header>
+<header class="scroll">
 	<div class="logo">
 		<div class="appIconShadow">
 			<svg width="0" height="0">
@@ -22,6 +22,7 @@
 			{% if site.presskit_download_link %}
 			<li><a href="{{ site.presskit_download_link }}">Press Kit</a></li>
 			{% endif %}
+			<li><a href="{{ page.url | relative_url }}">What's New</a></li>
 		</ul>
 	</nav>
 </header>

_sass/layout.scss

@@ -83,19 +83,31 @@ header {
 	display: flex;
 }
 
+.scroll {
+	white-space: nowrap; /* [1] */
+	overflow-x: auto; /* [2] */
+	-webkit-overflow-scrolling: touch; /* [3] */
+	-ms-overflow-style: -ms-autohiding-scrollbar; /* [4] */
+}
+
+.scroll::-webkit-scrollbar {
+	display: none;
+}
+
 .logo {
 	display: flex;
 	width: 100%;
 	justify-content: flex-start;
 	align-items: center;
 	height: 115px;
+	margin-right: 30px;
 }
 
 .logo > p {
 	color: $header-title-color;
 	display: flex;
 	font-weight: bold;
-	padding-bottom: 1px;
+	padding-bottom: 0px;
 }
 
 .headerIcon {
@@ -124,7 +136,7 @@ nav > ul {
 }
 
 nav > ul li {
-	padding-left: 50px;
+	padding-left: 30px;
 	text-align: right;
 }