From bfeba412f677ebeed4bd769ad63e573f43d6f309 Mon Sep 17 00:00:00 2001
From: Sarah Conway <sarah.conway@crunchydata.com>
Date: Tue, 18 Sep 2018 14:08:08 -0700
Subject: [PATCH] add navigation styles

---
 static/css/style.css      | 73 +++++++++++++++++++++++++++++++++++++++
 static/js/main.js         | 18 ++++++++++
 templates/base.html       |  1 +
 templates/index_base.html |  1 +
 4 files changed, 93 insertions(+)
 create mode 100644 static/js/main.js

diff --git a/static/css/style.css b/static/css/style.css
index 34d3e66..d7f4aea 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -213,6 +213,79 @@ a:hover {
       margin-bottom: 15px;
   }
 
+  /* NAVIGATION */
+
+	.navbar-fixed-top {
+	    top: 0;
+	    border-width: 0;
+			background-color: #fff;
+			box-shadow: 0 0 5px rgba(0,0,0,.8);
+	}
+
+	.navbar-brand {
+  	  float: left;
+  	  font-size: initial;
+  	  max-height: 40px;
+  	  padding: 5px;
+	}
+
+	.navbar-brand > img {
+  	  max-height: 40px;
+	}
+
+	img#logo {
+			display: inline-block;
+	}
+
+	.navbar-nav>li>a {
+      color: #000;
+	}
+
+	.navbar-default .navbar-toggle {
+  		border: none;
+  		color: #121212;
+	}
+
+	.nav .open>a, .nav .open>a:focus, .nav .open>a:hover {
+  	  background-color: rgba(0,0,0,0);
+	}
+
+	.fixedtheme .navbar-nav > li.active,
+	.fixedtheme .navbar-nav > li > a:focus,
+	.fixedtheme .navbar-nav > li > a:hover,
+	.navbar-nav > li.active > a,
+	.navbar-nav > li > a:hover,
+	.navbar-nav > li > a:focus,
+	.navbar-nav > li.open {
+      color: #0E1210;
+  		background-color: transparent;
+	}
+
+	.navbar-default .navbar-nav > li > a {
+  	  color: #121212;
+  	  font-weight: 600;
+  	  transition: all 0.4s ease;
+  	  -moz-transition: all 0.4s ease; /* Firefox 4 */
+  	  -webkit-transition: all 0.4s ease; /* Safari and Chrome */
+  	  -o-transition: all 0.4s ease; /* Opera */
+	}
+
+	.fixedtheme .navbar-nav > li > a {
+  		transition: all 0.4s ease;
+  		-moz-transition: all 0.4s ease; /* Firefox 4 */
+  		-webkit-transition: all 0.4s ease; /* Safari and Chrome */
+  		-o-transition: all 0.4s ease; /* Opera */
+	}
+
+  .heading {
+      color: #0E1210;
+      margin: 0;
+      display: inline-block;
+      font-size: 1.25em;
+  }
+
+  /* MEDIA QUERIES */
+
   @media only screen and (max-width: 990px){
       .our-team{ margin-bottom: 30px; }
   }
diff --git a/static/js/main.js b/static/js/main.js
new file mode 100644
index 0000000..dc1425b
--- /dev/null
+++ b/static/js/main.js
@@ -0,0 +1,18 @@
+function isMobile() {
+   return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+}
+
+//if not a mobile device, then...
+if (!isMobile()) {
+
+  //resize menu to .fixedtheme styling on scroll
+  $(document).on("scroll",function(){
+      if($(document).scrollTop()>10){
+          $("nav").addClass("fixedtheme");
+          $("#header-container").addClass("fixedtheme");
+      } else{
+          $("nav").removeClass("fixedtheme");
+          $("#header-container").removeClass("fixedtheme");
+      }
+  });
+}
diff --git a/templates/base.html b/templates/base.html
index 260bc52..e6da76e 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -15,6 +15,7 @@
 
 		<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
 		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
+		<script src="{{media("js/main.js")}}"></script>
 		<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
 		<link rel="stylesheet" href="{{media("css/style.css")}}">
 
diff --git a/templates/index_base.html b/templates/index_base.html
index 4e98bbe..6aca617 100644
--- a/templates/index_base.html
+++ b/templates/index_base.html
@@ -15,6 +15,7 @@
 
 		<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
 		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
+		<script src="{{media("js/main.js")}}"></script>
 		<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
 		<link rel="stylesheet" href="{{media("css/style.css")}}">
 
-- 
2.39.5