Changes to nav items, autoscroll, styles. See details.

1.
 - Set a minimum page height, client doesn't want to see the next
 section when tabing through pages.
 - can the home page, which only has two sentence not have a minimum
  height set? Yes
 - home page graphic image doesn't seem to be wrapping correctly in
  mobile view.
 - Make site Nav titles (Home, Services, Portfolio, and Contact Us)
  BOLD when in the sub pages for that section.
 - Reduce the height vertical line separating the page titles, more
  like the main nav.
2.
 - scroll to page home Sub-level top of page position - when
  clicking one of sub-nav tabs it will go to the same scroll position
  that clicking on the primary navigation tab does (ie top of page).

*. An additional fix was needed for the header image which wasn't
  properly resizing into mobile views

diff --git a/assets/js/global.js b/assets/js/global.js
index 8fa8d39..dec6e62 100755 (executable)
--- a/assets/js/global.js
+++ b/assets/js/global.js
@@ -187,7 +187,15 @@
 
        // Fire on document ready.
        $( document ).ready( function() {
-            $( '.panel-toggle').on('click',function() {
+            $( '.panel-toggle').on('click',function(e) {
+                e.preventDefault();
+                var scrollTarget = $($(this).attr("href"));
+    //            console.log(scrollTarget);
+                if (scrollTarget) {
+                    $('body, html').animate({
+                        scrollTop: scrollTarget.offset().top-90
+                    }, 300);
+                }
                 target = $(this).attr('id').split("-")[1];
                 parent_target = $(this).parents('.parent-container').attr('id').split("-")[1];
                 $('#nav-'+parent_target+' .page-nav-container li').removeClass("active");

diff --git a/assets/js/navigation.js b/assets/js/navigation.js
index a2cdc44..a8c2d03 100755 (executable)
--- a/assets/js/navigation.js
+++ b/assets/js/navigation.js
@@ -109,52 +109,55 @@
 
 //        console.log($(window).width());
 
-//        var myTopPosition = $(window).scrollTop() + 200;
+        var myTopPosition = $(window).scrollTop() + 100;
 
 //        setActiveNavItem();
 //        updateStaticNavPositions();
-//
-//        $(window).scroll(function() {
-//            myTopPosition = $(window).scrollTop() + 200;
-//            //var myBottomPosition = $(window).scrollTop() + $(window).height();
-//
-//            setActiveNavItem();
+
+        $(window).scroll(function() {
+            myTopPosition = $(window).scrollTop() + 100;
+            //var myBottomPosition = $(window).scrollTop() + $(window).height();
+
+            setActiveNavItem();
 //            updateStaticNavPositions();
-//
-//        });
 
-        $(".static-nav-link").click(function() {
+        });
 
+        $(".static-nav-link").click(function(e) {
+            e.preventDefault();
             var scrollTarget = $($(this).attr("href"));
 //            console.log(scrollTarget);
             if (scrollTarget) {
                 $('body, html').animate({
-                    scrollTop: scrollTarget.offset().top-100
+                    scrollTop: scrollTarget.offset().top-90
                 }, 300);
             }
 
         });
 
-        $(".static-home-link").click(function() {
-
-        var scrollTarget = $('.home');
+        $(".static-home-link").click(function(e) {
+            e.preventDefault();
+            var scrollTarget = $('.home');
 //            console.log(scrollTarget);
             if (scrollTarget) {
                 $('body, html').animate({
-                    scrollTop: scrollTarget.offset().top-100
+                    scrollTop: scrollTarget.offset().top-90
                 }, 300);
             }
 
         });
 
         function setActiveNavItem() {
-//            $(".twentyseventeen-panel").each(function() {
-//                if(myTopPosition > $(this).offset().top && ( $(this).offset().top + $(this).outerHeight() > myTopPosition) ) {
-//                    $("body, html").find("#static-nav-" + $(this).attr("id")).addClass("active");
-//                } else {
-//                    $("body, html").find("#static-nav-" + $(this).attr("id")).removeClass("active");
-//                }
-//            });
+            console.log("here");
+            $(".nav-parent").each(function() {
+                if(myTopPosition > $(this).offset().top && ( $(this).offset().top + $(this).next().outerHeight() > myTopPosition-90) ) {
+
+                    $('.top-nav-right-list a[href="#' + $(this).attr("id")  +'"]').addClass("active");
+                } else {
+                    //console.log("no");
+                    $('.top-nav-right-list a[href="#' + $(this).attr("id")  +'"]').removeClass("active");
+                }
+            });
         }
 
         function updateStaticNavPositions() {

diff --git a/front-page.php b/front-page.php
index 03d040d..a3b3d3a 100755 (executable)
--- a/front-page.php
+++ b/front-page.php
@@ -80,7 +80,7 @@ get_header(); ?>
                                             foreach ($child_posts as $child_post) {
                                                 ?>
                                                 <li <?php if ($nav_count == 0) { echo "class='active'";}?>>
-                                                    <span id='toggle-<?php echo $child_post->ID; ?>' class=" panel-toggle"><?php echo $child_post->post_title; ?></span>
+                                                    <a id='toggle-<?php echo $child_post->ID; ?>' class="panel-toggle" href="#nav-<?php echo $a_parent->ID;?>"><?php echo $child_post->post_title; ?></a>
                                                 </li>
                                                 <?php
                                                 $nav_count++;

diff --git a/style.css b/style.css
index 69709b6..4b6eea5 100755 (executable)
--- a/style.css
+++ b/style.css
@@ -1555,10 +1555,18 @@ a:hover .nav-title,
 }
 .static-nav-section .active {
 
+}
+.static-nav-link:hover {
+    text-decoration: underline;
+    font-weight: normal;
 }
 .static-nav-link.active {
     color: black;
+    font-weight: bold;
+}
+.static-nav-link.active:hover {
     text-decoration: underline;
+    font-weight: bold;
 }
 .static-nav-link.active::after {
     text-decoration: none;
@@ -1592,7 +1600,7 @@ a:hover .nav-title,
     float: left;
 }
 .top-nav-left > img {
-    height: 65px;
+    max-height: 65px;
 }
 .top-nav-right {
     float: right;
@@ -1849,7 +1857,7 @@ body {
     margin-top: 30px;
 }
 .top-nav-left img {
-    height: 65px;
+    max-height: 65px;
 }
 
 #masthead .wrap {
@@ -1857,7 +1865,7 @@ body {
 }
 
 .site-header {
-       background-color: #fafafa;
+       background-color: white;
        position: relative;
 }
 
@@ -2001,7 +2009,7 @@ body:not(.title-tagline-hidden) .site-branding-text {
 .has-header-image .custom-header-media img,
 .has-header-video .custom-header-media video,
 .has-header-video .custom-header-media iframe {
-       position: fixed;
+       position: relative;
        height: auto;
        left: 50%;
         margin-top: 75px;
@@ -2075,7 +2083,7 @@ body:not(.title-tagline-hidden) .site-branding-text {
 }
 @media screen and (max-width: 1280px) {
     .has-header-image .custom-header-media img {
-        top: 70px;
+        top: 50px;
     }
 }
 
@@ -2117,6 +2125,21 @@ body:not(.has-header-image):not(.has-header-video) .custom-header-media {
         max-width: 1000px;
         width: 100%;
 }
+@media screen and (min-width: 320px) {
+    .parent-container.content-parent {
+        min-height: 400px;
+    }
+}
+@media screen and (min-width: 640px) {
+    .parent-container.content-parent {
+        min-height: 600px;
+    }
+}
+@media screen and (min-width: 1000px) {
+    .parent-container.content-parent {
+        min-height: 800px;
+    }
+}
 .nav-parent {
 }
 .content-separator {
@@ -2160,15 +2183,20 @@ body:not(.has-header-image):not(.has-header-video) .custom-header-media {
 .page-nav-container li {
     display: inline;
     cursor: pointer;
-/*    border-width: 0 1px;
-    border-style: solid;
-    border-color: lightgrey;*/
     float: left;
     list-style: outside none none;
     text-transform: lowercase;
     color: #666666
 }
-
+@media screen and (min-width: 768px) {
+    .page-nav-container li::after {
+        content: "|";
+        padding: 7px 5px;
+    }
+    .page-nav-container li:last-child::after {
+        content: "";
+    }
+}
 @media screen and (max-width: 768px) {
     .page-nav-container li {
         width: 100%;
@@ -2177,11 +2205,10 @@ body:not(.has-header-image):not(.has-header-video) .custom-header-media {
 }
 .page-nav-container li:hover .panel-toggle {
     color: black;
-    font-weight: bold;
+    text-decoration: underline;
 }
 .page-nav-container li.active .panel-toggle {
     color: black;
-    text-decoration: underline;
     font-weight: bold;
 }
 .page-content-container {
@@ -2217,14 +2244,9 @@ body:not(.has-header-image):not(.has-header-video) .custom-header-media {
 .panel-toggle {
     float: left;
     display: block;
-    padding: 2px 10px;
+    padding: 2px 7px;
     font-size: 18px;
-}
-.page-nav-container li .panel-toggle {
-    border-right: 1px solid #666666;
-}
-.page-nav-container li:last-child .panel-toggle {
-    border-right: 0;
+    margin-top: -2px;
 }
 @media screen and (max-width: 768px) {
     .panel-toggle {
@@ -4119,7 +4141,7 @@ object {
        .home.blog.has-header-image .custom-header-media,
        .home.blog.has-header-video .custom-header-media {
 /*             height: 1200px;*/
-               height: 51vh;
+               height: auto;
                max-height: 100%;
                overflow: hidden;
        }