From 9b10b513f56d30689577c0cd36dd6093f8e78a95 Mon Sep 17 00:00:00 2001 From: Laury GvR Date: Fri, 14 Jul 2017 11:38:05 -0400 Subject: [PATCH] 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 --- assets/js/global.js | 10 ++++++- assets/js/navigation.js | 47 +++++++++++++++++--------------- front-page.php | 2 +- style.css | 60 ++++++++++++++++++++++++++++------------- 4 files changed, 76 insertions(+), 43 deletions(-) diff --git a/assets/js/global.js b/assets/js/global.js index 8fa8d39..dec6e62 100755 --- 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 --- 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 --- a/front-page.php +++ b/front-page.php @@ -80,7 +80,7 @@ get_header(); ?> foreach ($child_posts as $child_post) { ?>
  • > - post_title; ?> + post_title; ?>
    • 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; } -- 2.17.1