Header dropdown overlay, clickable images

In the top-bar, the images have been made clickable like their
corresponding links. They also have a hover-overlay effect.
Footer text has also been updated by the action items.

diff --git a/css/app.css b/css/app.css
index 0e77390..47f5074 100644 (file)
--- a/css/app.css
+++ b/css/app.css
@@ -6447,17 +6447,30 @@ header {
     width: 100%;
     background: #FFFFFF; }
     .top-bar-section ul li.menu-icon ul.dropdown li {
+      margin-bottom: 44px;
       width: 25%; }
       .top-bar-section ul li.menu-icon ul.dropdown li a {
+        background-color: transparent;
+        height: 300px;
+        min-width: 200px;
+        position: absolute;
         text-align: center;
-        min-width: 200px; }
+        top: 10px; }
         .top-bar-section ul li.menu-icon ul.dropdown li a::after {
           display: none; }
-      .top-bar-section ul li.menu-icon ul.dropdown li:not(.has-form):not(.active) > a:not(.button) {
-        background: #374343;
-        margin-top: -7px; }
+      .top-bar-section ul li.menu-icon ul.dropdown li:not(.has-form) > a:not(.button) {
+        background: transparent; }
+        .top-bar-section ul li.menu-icon ul.dropdown li:not(.has-form) > a:not(.button) span {
+          background: #374343;
+          bottom: -50px;
+          left: 0;
+          /*                                    margin-top: -7px;*/
+          position: absolute;
+          width: 100%; }
       .top-bar-section ul li.menu-icon ul.dropdown li.active:not(.has-form) a:not(.button) {
-        margin-top: -7px; }
+        /*                                margin-top: -7px;*/ }
+      .top-bar-section ul li.menu-icon ul.dropdown li:hover:not(.has-form) > a:not(.button) {
+        background: rgba(0, 0, 0, 0.5); }
   .top-bar-section ul li.drop-left > .dropdown {
     right: 0 !important;
     left: auto !important;

diff --git a/footer.php b/footer.php
index 53cebc6..6035acf 100644 (file)
--- a/footer.php
+++ b/footer.php
@@ -1,6 +1,6 @@
                     </main><!--End of main-->
                         <footer class="main">
-                            
+
                             <div class="row medium-uncollapse large-collapse">
                                 <div class="small-12 small-text-center large-text-left medium-6 large-3 columns">
                                     <h6>Brought to you by</h6>
@@ -8,12 +8,12 @@
                                 </div>
                                 <div class="small-12 medium-6 large-3 columns subscribe text-center">
                                     <h5>Mailing List</h5>
-                                    <p>Subscribe to recieve deal alerts.</p>
+                                    <p>Subscribe to receive deal alerts.</p>
                                     <a id="subscribe-button" href="<?php echo get_permalink(64); ?>">Subscribe</a>
                                 </div>
                                 <div class="small-12 medium-6 large-3 columns advertise text-center">
                                     <h5>Advertise With Us</h5>
-                                    <p>Text explaining why</p>
+                                    <p>In Four Easy Steps</p>
                                     <a id="advertise-button" href="<?php echo get_permalink(61); ?>">Advertise</a>
                                 </div>
                                 <div id="area-info" class="small-12 medium-6 large-3 columns text-center">
@@ -23,8 +23,8 @@
                                 </div>
                             </div>
                         </footer>
-                    
-                
+
+
                 <div id="copyright" class="small-12 text-center row columns">
                     <span>Copyright &copy; <?php echo date('Y');?> </span>
                     <span class="bullet"> &#8226; </span>

diff --git a/js/app.js b/js/app.js
index 1eb0250..6c548db 100644 (file)
--- a/js/app.js
+++ b/js/app.js
@@ -29,7 +29,7 @@ $(document).ready(function () {
         }
         //console.log('ul = ' + menuImg);
         //console.log('menu-id = ' + menuNum);
-    });    
+    });
 //    $("#second-row iframe").fancybox({
 //
 //         helpers: {
@@ -50,7 +50,7 @@ $(document).ready(function () {
             this.title = $(this.element).find('img').attr('alt');
         }
     });
-    
+
     var slideshow = $("#slideshow");
     var body = $("body");
     var sticky = $(".sticky");
@@ -65,7 +65,7 @@ $(document).ready(function () {
        if(width > 319 && width < 641 ){
             $(page_front).css("padding-top", "200px");
         } else if(width > 639 && width < 1025){
-            $(page_front).css("padding-top", "155px");       
+            $(page_front).css("padding-top", "155px");
         } else if(width > 1024){
             $(page_front).css("padding-top", "65px");
             $(slideshow).css("margin-top", "20px");
@@ -81,12 +81,61 @@ $(document).ready(function () {
         if(width > 319 && width < 641 ){
             $(page_front).css("padding-top", "200px");
         } else if(width > 639 && width < 1025){
-            $(page_front).css("padding-top", "155px");       
+            $(page_front).css("padding-top", "155px");
         } else if(width > 1024){
             $(page_front).css("padding-top", "65px");
             $(slideshow).css("margin-top", "20px");
         }
 
     });
-    
+
+    $('#menu-topbar-menu .sub-menu .menu-item-object-page a').each(function() {
+        $(this).wrapInner("<span></span>");
+    });
+
+});
+;
+// Set footer position on scroll
+$(window).on('scroll', function () {
+  if ($(window).width() > 640) {
+    setTimeout(function(){ // Slight delay to avoid a jumpy transition
+      $('#sticky-topbar').css({'position' : get_footer_position});
+    }, 200);
+  }  
 });
+
+// Set footer position on load
+$(function() {
+  var position = get_footer_position();
+  $('#sticky-topbar').css({'position' : position});
+});
+
+function get_footer_position() {
+  if ($(window).width() < 640) {
+    return 'relative';
+  }
+  var footer = $('#sticky-topbar');
+  var height_of_footer = footer.height();
+  var top_of_footer = footer.position().top;
+  // Account for fixed header and padding on the sticky-footer container
+  var fixed_header_height = $('.top-bar-container').height() - 20;
+
+  var top = $(window).scrollTop();
+  var bottom = top + $(window).height() - fixed_header_height;
+
+  if (top_of_footer < $(window).height()) {
+    return 'relative';
+  }
+  else if (bottom >= top_of_footer) {
+    return 'relative';
+  }
+  else if (bottom <= top_of_footer) {
+    return 'fixed';
+  }
+  
+//  function remove_the_arrow() {
+//      $('.sticky-footer-wrapper-class:after').css('border-width', '0');
+//  }
+}
+
+

diff --git a/js/custom/pageSetup.js b/js/custom/pageSetup.js
index 46f6e22..b8404af 100644 (file)
--- a/js/custom/pageSetup.js
+++ b/js/custom/pageSetup.js
@@ -20,7 +20,7 @@ $(document).ready(function () {
         }
         //console.log('ul = ' + menuImg);
         //console.log('menu-id = ' + menuNum);
-    });    
+    });
 //    $("#second-row iframe").fancybox({
 //
 //         helpers: {
@@ -41,7 +41,7 @@ $(document).ready(function () {
             this.title = $(this.element).find('img').attr('alt');
         }
     });
-    
+
     var slideshow = $("#slideshow");
     var body = $("body");
     var sticky = $(".sticky");
@@ -56,7 +56,7 @@ $(document).ready(function () {
        if(width > 319 && width < 641 ){
             $(page_front).css("padding-top", "200px");
         } else if(width > 639 && width < 1025){
-            $(page_front).css("padding-top", "155px");       
+            $(page_front).css("padding-top", "155px");
         } else if(width > 1024){
             $(page_front).css("padding-top", "65px");
             $(slideshow).css("margin-top", "20px");
@@ -72,12 +72,16 @@ $(document).ready(function () {
         if(width > 319 && width < 641 ){
             $(page_front).css("padding-top", "200px");
         } else if(width > 639 && width < 1025){
-            $(page_front).css("padding-top", "155px");       
+            $(page_front).css("padding-top", "155px");
         } else if(width > 1024){
             $(page_front).css("padding-top", "65px");
             $(slideshow).css("margin-top", "20px");
         }
 
     });
-    
+
+    $('#menu-topbar-menu .sub-menu .menu-item-object-page a').each(function() {
+        $(this).wrapInner("<span></span>");
+    });
+
 });

diff --git a/js/custom/sticky-footer.js b/js/custom/sticky-footer.js
new file mode 100644 (file)
index 0000000..6a65258
--- /dev/null
+++ b/js/custom/sticky-footer.js
@@ -0,0 +1,45 @@
+
+// Set footer position on scroll
+$(window).on('scroll', function () {
+  if ($(window).width() > 640) {
+    setTimeout(function(){ // Slight delay to avoid a jumpy transition
+      $('#sticky-topbar').css({'position' : get_footer_position});
+    }, 200);
+  }  
+});
+
+// Set footer position on load
+$(function() {
+  var position = get_footer_position();
+  $('#sticky-topbar').css({'position' : position});
+});
+
+function get_footer_position() {
+  if ($(window).width() < 640) {
+    return 'relative';
+  }
+  var footer = $('#sticky-topbar');
+  var height_of_footer = footer.height();
+  var top_of_footer = footer.position().top;
+  // Account for fixed header and padding on the sticky-footer container
+  var fixed_header_height = $('.top-bar-container').height() - 20;
+
+  var top = $(window).scrollTop();
+  var bottom = top + $(window).height() - fixed_header_height;
+
+  if (top_of_footer < $(window).height()) {
+    return 'relative';
+  }
+  else if (bottom >= top_of_footer) {
+    return 'relative';
+  }
+  else if (bottom <= top_of_footer) {
+    return 'fixed';
+  }
+  
+//  function remove_the_arrow() {
+//      $('.sticky-footer-wrapper-class:after').css('border-width', '0');
+//  }
+}
+
+

diff --git a/scss/_topbar.scss b/scss/_topbar.scss
index 38d7777..63c11ea 100644 (file)
--- a/scss/_topbar.scss
+++ b/scss/_topbar.scss
@@ -46,25 +46,41 @@
                     width: 100%;
                     background: $white;
                     li {
+                        margin-bottom: 44px;
                         width: 25%;
                         a {
-                            text-align: center;
+                            background-color: transparent;
+                            height: 300px;
                             min-width: 200px;
+                            position: absolute;
+                            text-align: center;
+                            top: 10px;
                             &::after {
                                 display: none;
                             }
                         }
-                        &:not(.has-form):not(.active) {
+                        &:not(.has-form) {
+
                             & > a:not(.button) {
-                                background: $d-gray;
-                                margin-top: -7px;
+                                background: transparent;
+                                span {
+                                    background: $d-gray;
+                                    bottom: -50px;
+                                    left: 0;
+/*                                    margin-top: -7px;*/
+                                    position: absolute;
+                                    width: 100%;
+                                }
                             }
                         }
                         &.active:not(.has-form) {
                             a:not(.button) {
-                                margin-top: -7px;
+/*                                margin-top: -7px;*/
                             }
                         }
+                        &:hover:not(.has-form) > a:not(.button) {
+                            background: rgba(0,0,0,0.5);
+                        }
                     }
                 }
             }
@@ -73,7 +89,7 @@
 //                    background: transparent;
 //                }
 //            }
-            
+
             &.drop-left > .dropdown {
                 right: 0 !important; // may have to be 134px
                 left: auto !important;