added jquery to determine screen size and apply or remove sticky class to heaer

diff --git a/header.php b/header.php
index 0c57134..8f6fc8c 100644 (file)
--- a/header.php
+++ b/header.php
@@ -26,7 +26,7 @@
       <div class="off-canvas-wrap" data-offcanvas>
         <div class="inner-wrap">
             <div id="page-wrapper">
-                   <div class='sticky' data-sticky data-margin-top="0">
+                   <div class="sticky stickyContainer" data-margin-top="0">
                    <div class="headerContainer">
                     <header>
                         <div class="row">
@@ -51,5 +51,5 @@
                 </div>
                
                     <?php get_template_part('parts/top-bar');?>
-                </div>
+               
                     <?php get_template_part('parts/off-canvas-menu');?>

diff --git a/js/app.js b/js/app.js
index 2743f75..09c3494 100644 (file)
--- a/js/app.js
+++ b/js/app.js
@@ -29,7 +29,22 @@ $(document).ready(function () {
             $(this).find('li.image-placeholder').parent('ul').addClass('no-image-subul');
             $(this).find('li.image-placeholder').remove();
         }
+        
         //console.log('ul = ' + menuImg);
         //console.log('menu-id = ' + menuNum);
     });
+    var width = $(window).width();
+    if(width < 1024){
+        $(".stickyContainer").removeClass("sticky");
+          
+    } 
+                // set values based on screen resizing
+    $(window).resize(function (){
+        if( $(this).width() < 1024){
+            $(".stickyContainer").removeClass("sticky");
+   
+        } else if($(this).width() >= 1024) {
+            $(".stickyContainer").addClass("sticky");
+        }
+    });
 });

diff --git a/js/custom/pageSetup.js b/js/custom/pageSetup.js
index 29d8f11..f5e628a 100644 (file)
--- a/js/custom/pageSetup.js
+++ b/js/custom/pageSetup.js
@@ -20,7 +20,22 @@ $(document).ready(function () {
             $(this).find('li.image-placeholder').parent('ul').addClass('no-image-subul');
             $(this).find('li.image-placeholder').remove();
         }
+        
         //console.log('ul = ' + menuImg);
         //console.log('menu-id = ' + menuNum);
     });
+    var width = $(window).width();
+    if(width < 1024){
+        $(".stickyContainer").removeClass("sticky");
+          
+    } 
+                // set values based on screen resizing
+    $(window).resize(function (){
+        if( $(this).width() < 1024){
+            $(".stickyContainer").removeClass("sticky");
+   
+        } else if($(this).width() >= 1024) {
+            $(".stickyContainer").addClass("sticky");
+        }
+    });
 });

diff --git a/parts/top-bar.php b/parts/top-bar.php
index f585e10..726e65a 100644 (file)
--- a/parts/top-bar.php
+++ b/parts/top-bar.php
@@ -5,7 +5,7 @@
         </section>
     </nav>
 
-
+</div>
     <nav class="tab-bar show-for-medium-down">
         <section class="left-small">
             <a class="left-off-canvas-toggle menu-icon" href="#"><span>Menu</span></a>