Make some adjustments for smaller view and have sub levels.

Still removing sub levels in the small view but updated the style a bit
to keep them in the medium view.

diff --git a/style.css b/style.css
index 2e9ecf2..9f94084 100755 (executable)
--- a/style.css
+++ b/style.css
@@ -1526,7 +1526,7 @@ a:hover .nav-title,
     //padding: 20px;
 }
 .static-nav-section .active {
-    
+
 }
 .static-nav-link.active {
     color: black;
@@ -1615,13 +1615,16 @@ a:hover .nav-title,
 .navigation-bottom .wrap {
     padding: 0;
 }
-@media screen and (max-width: 1024px) {
+@media screen and (max-width: 640px) {
     .site-navigation-fixed {
         display: none;
     }
+    .panel-content .wrap {
+        margin-top: 0;
+    }
 }
 @media screen and (max-width: 1280px) {
-    
+
 
        .home .site-navigation-fixed.navigation-top {
                bottom: auto;
@@ -1651,12 +1654,12 @@ a:hover .nav-title,
        .admin-bar .site-navigation-fixed.navigation-top {
                top: 32px;
        }
-    .has-header-image .custom-header-media img, 
-    .has-header-video .custom-header-media video, 
-    .has-header-video .custom-header-media iframe, 
-    .has-header-image:not(.twentyseventeen-front-page):not(.home) 
+    .has-header-image .custom-header-media img,
+    .has-header-video .custom-header-media video,
+    .has-header-video .custom-header-media iframe,
+    .has-header-image:not(.twentyseventeen-front-page):not(.home)
     .custom-header-media img {
-        //display: none;
+        /* display: none; */
     }
     .custom-header-media {
         position: relative;
@@ -1667,7 +1670,7 @@ a:hover .nav-title,
         position: fixed;
         height: auto;
         left: 50%;
-        margin-top: 140px;
+        /* margin-top: 140px; */
     }
     .home .top-nav-left {
         max-width: 100%;
@@ -1709,6 +1712,7 @@ a:hover .nav-title,
         z-index: 9;
     }
     .home .wrap .static-nav-parent {
+        float: none;
         left: 0;
         position: relative;
         font-size: 30px;
@@ -1717,6 +1721,9 @@ a:hover .nav-title,
     .home .static-nav-section {
         padding: 6px;
     }
+    .panel-content .wrap {
+        margin-top: 80px;
+    }
     .home .static-nav-section > ul > li {
         font-size: 16px;
         padding: 0;
@@ -1724,11 +1731,14 @@ a:hover .nav-title,
     .home .navigation-top nav {
         margin-left: 0;
     }
-    .js .home #static-nav-top .static-nav-section > ul, 
+    .js .home #static-nav-top .static-nav-section > ul,
     .js .home #static-nav-bottom .static-nav-section > ul {
         margin: 0;
     }
-    
+    .static-nav-section ul .static-nav-link::after {
+        padding: 0 5px;
+    }
+
 }
 /*--------------------------------------------------------------
 13.0 Layout
@@ -1899,6 +1909,14 @@ body:not(.title-tagline-hidden) .site-branding-text {
        height: 75vh;
        width: 100%;
 }
+@media screen and (max-width: 48em) {
+    .has-header-image.twentyseventeen-front-page .custom-header,
+    .has-header-video.twentyseventeen-front-page .custom-header,
+    .has-header-image.home.blog .custom-header,
+    .has-header-video.home.blog .custom-header {
+        height: auto;
+    }
+}
 
 .custom-header-media {
        bottom: 0;
@@ -2000,6 +2018,11 @@ body:not(.title-tagline-hidden) .site-branding-text {
                width: 100%;
        }
 }
+@media screen and (max-width: 1280px) {
+    .has-header-image .custom-header-media img {
+        top: 100px;
+    }
+}
 
 /* Hides div in Customizer preview when header images or videos change. */
 
@@ -3834,8 +3857,8 @@ object {
                position: absolute;
                right: 1em;
                top: 50%;
-               -webkit-transform: rotate(-90deg);  Chrome, Safari, Opera 
-               -ms-transform: rotate(-90deg);  IE 9 
+               -webkit-transform: rotate(-90deg);  Chrome, Safari, Opera
+               -ms-transform: rotate(-90deg);  IE 9
                transform: rotate(-90deg);
        }
 
@@ -3857,7 +3880,7 @@ object {
        }*/
 
        .site-header .site-navigation-fixed .menu-scroll-down {
-               display: none;
+               /* display: none; */
        }
 
        /* Scroll down arrow */