better navigation CSS

app/assets/dash_v1.css

@@ -25,69 +25,6 @@ a {
 	color: #004d4d;
 }
 
-.page-header {
-	background: #ccdddd;
-	width: 100%;
-	margin: 0;
-	padding: 0;
-	padding-left: 20px;
-	padding-right: 20px;
-	position: fixed;
-	top: 0;
-	left: 0;
-	z-index: 100;
-}
-
-.devbug-header {
-	background: #509d9d;
-	width: 100%;
-	position: relative;
-	margin: 0;
-	padding: 5px;
-	padding-left: 20px;
-	margin-left: -20px;
-	color: white;
-}
-
-.spacer {
-	min-height: 165px;
-}
-
-.navul {
-	list-style-type: none;
-	margin: 0;
-	padding: 0;
-	padding-left: 20px;
-	padding-top: 10px;
-	padding-bottom: 10px;
-	margin-left: -20px;
-	position: relative;
-	width: 100%;
-	background: #004d4d;
-}
-
-.navli {
-	display: inline;
-	background: #eee;
-	border-radius: 7px;
-	margin-right: 10px;
-	transition: all 0.5s ease;
-}
-
-.navli:hover {
-	background: #509d9d;
-}
-
-.nava {
-	text-decoration: none;
-	padding: 20;
-	transition: all 0.5s ease;
-}
-
-.nava:hover {
-	color: #eee;
-}
-
 .btn, .action {
 	margin: 5;
 	margin-bottom: 20;
@@ -133,4 +70,82 @@ pre {outline: 1px solid #ccc; padding: 5px; margin: 5px; }
     height: 50%;
     min-height: 500px;
     z-index: 0;
+}
+
+/* New Theme Styles */
+body { 
+	margin:0;
+	padding:0;
+	box-sizing:border-box;
+}
+
+#pre-header, #title-header {
+	margin: 0;
+	top: 0;
+	left: 0;
+	background: #307d7d;
+	width: 100%;
+}
+
+#title-header {
+	background: #ccdddd;
+}
+
+#title-header-content {
+	padding: 14px;
+	font-size: 20pt;
+	font-weight: bold;
+}
+
+#pre-header-content {
+	padding: 7px;
+	padding-left: 14px;
+	color: #f2f2f2;
+}
+
+#navbar {
+	overflow: hidden;
+	background-color: #333;
+	top: 0;
+	left: 0;
+	margin: 0;
+}
+
+#navbar a {
+	float: left;
+	display: block;
+	color: #f2f2f2;
+	text-align: center;
+	padding: 14px;
+	text-decoration: none;
+	transition: all 0.5s ease;
+}
+
+#navbar {
+	list-style-type: none;
+	margin: 0;
+	padding: 0;
+	overflow: hidden;
+}
+
+.navbar-right {
+	float: right;
+}
+
+#navbar a:hover {
+	background: #307d7d;
+}
+
+.content {
+	padding: 16px;
+}
+
+.sticky {
+	position: fixed;
+	top: 0;
+	width: 100%;
+}
+
+.sticky + .content {
+	padding-top: 60px;
 }

app/assets/dash_v1.js

@@ -28,3 +28,15 @@ function from_server(json_string){
     json_string = JSON.parse(json_string.replace(/"/g, '"').replace(/\p{C}+/g, '?'))
     window.devbug = json_string
 }
+
+const navbar = document.getElementById('navbar')
+const sticky = navbar.offsetTop;
+
+window.onscroll = () => {
+    if ( window.pageYOffset >= sticky ) {
+        navbar.classList.add('sticky')
+    }
+    else {
+        navbar.classList.remove('sticky')
+    }
+}