From bfeba412f677ebeed4bd769ad63e573f43d6f309 Mon Sep 17 00:00:00 2001 From: Sarah Conway 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 @@ + 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 @@ + -- 2.39.5