adding sticky dropdown properties menu to mobile

diff --git a/css/app.css b/css/app.css
index 89350d2..e234e7b 100644 (file)
--- a/css/app.css
+++ b/css/app.css
@@ -6483,6 +6483,15 @@ header .searchform input[type="submit"]:hover {
 #input {
   display: none; }
 
+#properties section.top-bar-section {
+  left: 0 !important; }
+
+@media only screen and (max-width: 40em) {
+  #headerLogo {
+    margin-top: 30px; }
+  #properties {
+    margin-left: 0px !important; } }
+
 .contain-to-grid {
   box-shadow: 0 5px 10px -1px #999999; }
   .contain-to-grid .top-bar {

diff --git a/header.php b/header.php
index b8cfb9d..22c8b99 100644 (file)
--- a/header.php
+++ b/header.php
@@ -15,7 +15,7 @@
       <div class="off-canvas-wrap" data-offcanvas>
         <div class="inner-wrap">
             <div id="page-wrapper">
-                    <header id="header-all" class="show-for-medium-up">
+                    <header id="header-all" class="show-for-small-up">
                         <div class="row collapse">
                             <div id="properties" class="small-12 medium-6 large-4 columns">
                                 <nav class="top-bar text-center" data-topbar role="navigation">

diff --git a/js/app.js b/js/app.js
index e06e7b5..42321b3 100644 (file)
--- a/js/app.js
+++ b/js/app.js
@@ -18,8 +18,6 @@ $(document).ready(function () {
         $(this).toggleClass('open');
         $(this).siblings('ul').toggleClass('open');
     });
-    
-    
     // Custom js and jquery for staffords ///////////////////
     // reservation for toggle click function ///////////////
     $("#res-tab a").on('click', function () {
@@ -28,7 +26,6 @@ $(document).ready(function () {
         } else {
             $("#res-tab-open").attr("id", "res-tab");
         }
-        //
     });
     var start, nights, extraDay, end, arrival, currentDate, currentDate2, requiredDate, requiredDate1, minDays, departure, stay, d, dd,  m, y, bayView = 'vD4ZpIFk4%2b7FyPsaBnkCqP1cBHWnJili9k5D83MqJq4%3d&',
         crookedRiver = 'ZhWXD46i2%2fq319vcR%2fcw69rZvA2bz%2fttOOxO9t1%2fBJ0%3d&',
@@ -39,8 +36,6 @@ $(document).ready(function () {
     ///////off canvas date picker logic //////////////////////////////////////////////
     // Set inputs to default values ///////
     $("#propertyNameOff").val("");
-   // $("#arriveOff").val("Arrival Date");
-   // $("#departOff").val("Departure Date");
     $("#nightsOff").val("");
     $("#adultsOff").val("");
     $("#kidsOff").val("");
@@ -98,7 +93,6 @@ $(document).ready(function () {
             $("#nightsOff").val("");
         }
         stay = 'stay_nights=' + $('#nightsOff').val() + '&';
-   
     });
     ///// end of canvas datepicker logic ^ //////////////////////////////////////////////
     /// top bar reservation form dropdown logic ////////////////////////////
@@ -133,7 +127,6 @@ $(document).ready(function () {
             departure = $("#depart").datepicker('getDate');
             $("#nights").val(Math.ceil(departure - currentDate) / (1000 * 60 * 60 * 24));
             stay = 'stay_nights=' + $('#nights').val() + '&';
-
         }
     });
     $("#arriveCal").click(function () {
@@ -161,7 +154,6 @@ $(document).ready(function () {
             window.open("https://www.bookonthenet.net/east/premium/eresmain.aspx?id=" + perry + start + stay + adults + kids);
         } else if ($('#propertyName option:selected').text() === "Property") {
             alert("Please Select a Property");
-            
         }
     });
     // top bar reservation dropdown button submission //////////////////////////////////////////
@@ -177,26 +169,12 @@ $(document).ready(function () {
         } else if ($('#propertyName option:selected').text() === "Property") {
             alert("Please Select a Property");
         }
-
     });
-    
-    // SEARCH BAR DISPLAY /////////////////////////////////////////////
-    /*$("li a.search").on('click', function () {
-        if ($(".searchform").css("display") === "none") {
-            $(".searchform").css("display", "inherit");
-            $('header ul.social').css("margin","10px 0px 0px");
-            $(".searchform input[type='submit']").css("display", "inherit");
-        } else {
-            $(".searchform").css("display", "none");
-            $('header ul.social').css("margin","10px 0px 0px");
-        }
-    }); */
     $("li a.search").click(function () {
         $(".searchform").animate({width: 'toggle'}, 1000);
         $("li a.search").css("visibility", "hidden");
         $('.searchform').css("left", "3px");
         $(".searchform input[type='text']").focus();
-       // $('#about .top-bar .top-bar-section ul#menu-about-staffords li').css("padding", "0px 31px");
     });
     $(".searchform input[type='text']").blur(function () {
         $(".searchform").animate({width: 'toggle'}, 1000);

diff --git a/js/custom/pageSetup.js b/js/custom/pageSetup.js
index 58ae39d..80dffb1 100644 (file)
--- a/js/custom/pageSetup.js
+++ b/js/custom/pageSetup.js
@@ -9,8 +9,6 @@ $(document).ready(function () {
         $(this).toggleClass('open');
         $(this).siblings('ul').toggleClass('open');
     });
-    
-    
     // Custom js and jquery for staffords ///////////////////
     // reservation for toggle click function ///////////////
     $("#res-tab a").on('click', function () {
@@ -19,7 +17,6 @@ $(document).ready(function () {
         } else {
             $("#res-tab-open").attr("id", "res-tab");
         }
-        //
     });
     var start, nights, extraDay, end, arrival, currentDate, currentDate2, requiredDate, requiredDate1, minDays, departure, stay, d, dd,  m, y, bayView = 'vD4ZpIFk4%2b7FyPsaBnkCqP1cBHWnJili9k5D83MqJq4%3d&',
         crookedRiver = 'ZhWXD46i2%2fq319vcR%2fcw69rZvA2bz%2fttOOxO9t1%2fBJ0%3d&',
@@ -30,8 +27,6 @@ $(document).ready(function () {
     ///////off canvas date picker logic //////////////////////////////////////////////
     // Set inputs to default values ///////
     $("#propertyNameOff").val("");
-   // $("#arriveOff").val("Arrival Date");
-   // $("#departOff").val("Departure Date");
     $("#nightsOff").val("");
     $("#adultsOff").val("");
     $("#kidsOff").val("");
@@ -89,7 +84,6 @@ $(document).ready(function () {
             $("#nightsOff").val("");
         }
         stay = 'stay_nights=' + $('#nightsOff').val() + '&';
-   
     });
     ///// end of canvas datepicker logic ^ //////////////////////////////////////////////
     /// top bar reservation form dropdown logic ////////////////////////////
@@ -124,7 +118,6 @@ $(document).ready(function () {
             departure = $("#depart").datepicker('getDate');
             $("#nights").val(Math.ceil(departure - currentDate) / (1000 * 60 * 60 * 24));
             stay = 'stay_nights=' + $('#nights').val() + '&';
-
         }
     });
     $("#arriveCal").click(function () {
@@ -152,7 +145,6 @@ $(document).ready(function () {
             window.open("https://www.bookonthenet.net/east/premium/eresmain.aspx?id=" + perry + start + stay + adults + kids);
         } else if ($('#propertyName option:selected').text() === "Property") {
             alert("Please Select a Property");
-            
         }
     });
     // top bar reservation dropdown button submission //////////////////////////////////////////
@@ -168,26 +160,12 @@ $(document).ready(function () {
         } else if ($('#propertyName option:selected').text() === "Property") {
             alert("Please Select a Property");
         }
-
     });
-    
-    // SEARCH BAR DISPLAY /////////////////////////////////////////////
-    /*$("li a.search").on('click', function () {
-        if ($(".searchform").css("display") === "none") {
-            $(".searchform").css("display", "inherit");
-            $('header ul.social').css("margin","10px 0px 0px");
-            $(".searchform input[type='submit']").css("display", "inherit");
-        } else {
-            $(".searchform").css("display", "none");
-            $('header ul.social').css("margin","10px 0px 0px");
-        }
-    }); */
     $("li a.search").click(function () {
         $(".searchform").animate({width: 'toggle'}, 1000);
         $("li a.search").css("visibility", "hidden");
         $('.searchform').css("left", "3px");
         $(".searchform input[type='text']").focus();
-       // $('#about .top-bar .top-bar-section ul#menu-about-staffords li').css("padding", "0px 31px");
     });
     $(".searchform input[type='text']").blur(function () {
         $(".searchform").animate({width: 'toggle'}, 1000);

diff --git a/parts/top-bar_main.php b/parts/top-bar_main.php
index 1948d7c..f422169 100644 (file)
--- a/parts/top-bar_main.php
+++ b/parts/top-bar_main.php
@@ -3,13 +3,14 @@
 </div>
 <div class="row show-for-small-down">
     <div class="small-11 small-centered text-center columns ">
-        <a href="<?php bloginfo('url'); ?>"><img src="<?php bloginfo('template_url'); ?>/assets/staffords-logo.jpg"></a>
+        <a href="<?php bloginfo('url'); ?>"><img id="headerLogo"  src="<?php bloginfo('template_url'); ?>/assets/staffords-logo.jpg"></a>
     </div>
 </div>
 <div id="long-bar" class="show-for-large-up">
     <div class="row">
         <div class="large-6 large-offset-4 columns">
             <nav class="top-bar text-left" data-topbar role="navigation">
+                
                 <section class="top-bar-section">
                     <?php feature_top_bar(); ?>
                 </section>
@@ -30,4 +31,3 @@
         <a class="right-off-canvas-toggle menu-icon" href="#"><span></span></a>
     </section>
 </nav>
-

diff --git a/scss/_page.header.scss b/scss/_page.header.scss
index 56dcd4f..8766728 100644 (file)
--- a/scss/_page.header.scss
+++ b/scss/_page.header.scss
@@ -270,3 +270,14 @@ header .searchform input[type="submit"]:hover{
 #input{
     display: none;
 }
+#properties section.top-bar-section{
+    left: 0 !important;
+}
+@media #{$small-only}{
+    #headerLogo{
+        margin-top: 30px;
+    }
+    #properties{
+        margin-left: 0px !important;
+    }
+}