From 2ae9227831fe487c6d1d32ea9b79c794cffd3f4a Mon Sep 17 00:00:00 2001
From: Tom Johnson <tomjohnson1492@gmail.com>
Date: Wed, 28 Jun 2017 00:05:50 -0700
Subject: [PATCH] fix navbar so that when browser width is small, it doesn't
 overlap heading

---
 _includes/topnav.html   |  2 +-
 _layouts/default.html   |  1 -
 css/customstyles.css    | 42 ++++++++++++++++++++++++++++++++++++++---
 css/modern-business.css |  6 +-----
 css/theme-blue.css      | 10 +++++++++-
 css/theme-green.css     |  7 +++++--
 6 files changed, 55 insertions(+), 13 deletions(-)

diff --git a/_includes/topnav.html b/_includes/topnav.html
index 315125f..e3d4d2c 100644
--- a/_includes/topnav.html
+++ b/_includes/topnav.html
@@ -1,5 +1,5 @@
 <!-- Navigation -->
-<nav class="navbar navbar-inverse navbar-fixed-top">
+<nav class="navbar navbar-inverse navbar-static-top">
     <div class="container topnavlinks">
         <div class="navbar-header">
             <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
diff --git a/_layouts/default.html b/_layouts/default.html
index b98130c..0d7602d 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -77,7 +77,6 @@
 <!-- Page Content -->
 <div class="container">
   <div id="main">
-    <div class="col-lg-12">&nbsp;</div>
     <!-- Content Row -->
     <div class="row">
         {% assign content_col_size = "col-md-12" %}
diff --git a/css/customstyles.css b/css/customstyles.css
index ef50193..5e7d021 100644
--- a/css/customstyles.css
+++ b/css/customstyles.css
@@ -83,8 +83,6 @@ padding-top: 60px;
 margin-top: -40px
 }
 
-body h1 {margin-top:40px;}
-
 .post-content img {
     margin: 12px 0px 3px 0px;
     width: auto;
@@ -232,7 +230,6 @@ ul#results-container a:hover {
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
-    float: right;
     margin-top:10px;
 }
 /* end search */
@@ -1167,3 +1164,42 @@ h4.panel-title {
     padding-top: 0px;
     margin-top: 0px;
 }
+
+/*set navbar breakpoint so that it converts to hamburger earlier */
+
+@media (max-width: 1200px) {
+    .navbar-header {
+        float: none;
+    }
+    .navbar-left,.navbar-right {
+        float: none !important;
+    }
+    .navbar-toggle {
+        display: block;
+    }
+    .navbar-collapse {
+        border-top: 1px solid transparent;
+        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
+    }
+    .navbar-fixed-top {
+        top: 0;
+        border-width: 0 0 1px;
+    }
+    .navbar-collapse.collapse {
+        display: none!important;
+    }
+    .navbar-nav {
+        float: none!important;
+        margin-top: 7.5px;
+    }
+    .navbar-nav>li {
+        float: none;
+    }
+    .navbar-nav>li>a {
+        padding-top: 10px;
+        padding-bottom: 10px;
+    }
+    .collapse.in{
+        display:block !important;
+    }
+}
diff --git a/css/modern-business.css b/css/modern-business.css
index 58dc4a2..b0323c5 100755
--- a/css/modern-business.css
+++ b/css/modern-business.css
@@ -11,10 +11,6 @@ body {
     height: 100%;
 }
 
-body {
-    padding-top: 50px; /* Required padding for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */
-}
-
 .img-portfolio {
     margin-bottom: 30px;
 }
@@ -90,4 +86,4 @@ footer {
     header.carousel .carousel {
         height: 70%;
     }
-}
\ No newline at end of file
+}
diff --git a/css/theme-blue.css b/css/theme-blue.css
index e05bd46..db84521 100644
--- a/css/theme-blue.css
+++ b/css/theme-blue.css
@@ -103,7 +103,7 @@ div.sidebarTitle {
 }
 
 li.sidebarTitle {
-    margin-top:40px;
+  margin-top:20px;
     font-weight:normal;
     font-size:130%;
     color: #ED1951;
@@ -111,3 +111,11 @@ li.sidebarTitle {
     margin-left: 5px;
 
 }
+
+.navbar-inverse .navbar-toggle:focus, .navbar-inverse .navbar-toggle:hover {
+    background-color: #015CAE;
+}
+
+.navbar-inverse .navbar-toggle {
+    border-color: #015CAE;
+}
diff --git a/css/theme-green.css b/css/theme-green.css
index bbae82e..4991586 100644
--- a/css/theme-green.css
+++ b/css/theme-green.css
@@ -97,11 +97,14 @@ div.sidebarTitle {
 }
 
 li.sidebarTitle {
-    margin-top:40px;
+    margin-top:20px;
     font-weight:normal;
     font-size:130%;
     color: #ED1951;
     margin-bottom:10px;
     margin-left: 5px;
-
+}
+
+.navbar-inverse .navbar-toggle:focus, .navbar-inverse .navbar-toggle:hover {
+    background-color: #E50E51;
 }