fix navbar so that when browser width is small, it doesn't overlap heading

_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">

_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" %}

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;
+    }
+}

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%;
     }
-}
+}

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;
+}

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;
 }