experimenting with a white tab bar for mobile and tablet view to place the logo insid...

diff --git a/css/app.css b/css/app.css
index c2218bc..7ae35e9 100644 (file)
--- a/css/app.css
+++ b/css/app.css
@@ -5421,8 +5421,8 @@ blockquote, blockquote p {
 
 .tab-bar {
   -webkit-backface-visibility: hidden;
-  background: #690433;
-  color: #FFFFFF;
+  background: #FFFFFF;
+  color: #16345B;
   height: 2.8125rem;
   line-height: 2.8125rem;
   position: relative; }
@@ -5439,7 +5439,7 @@ blockquote, blockquote p {
   position: absolute;
   top: 0;
   width: 2.8125rem;
-  border-right: solid 1px #350219;
+  border-right: solid 1px gray;
   left: 0; }
 
 .right-small {
@@ -5447,7 +5447,7 @@ blockquote, blockquote p {
   position: absolute;
   top: 0;
   width: 2.8125rem;
-  border-left: solid 1px #350219;
+  border-left: solid 1px gray;
   right: 0; }
 
 .tab-bar-section {
@@ -5471,7 +5471,7 @@ blockquote, blockquote p {
     right: 2.8125rem; }
 
 .tab-bar .menu-icon {
-  color: #FFFFFF;
+  color: #16345B;
   display: block;
   height: 2.8125rem;
   padding: 0;
@@ -5487,10 +5487,10 @@ blockquote, blockquote p {
     top: 50%;
     margin-top: -0.5rem;
     left: 0.90625rem;
-    box-shadow: 0 0 0 1px #FFFFFF, 0 7px 0 1px #FFFFFF, 0 14px 0 1px #FFFFFF;
+    box-shadow: 0 0 0 1px #16345B, 0 7px 0 1px #16345B, 0 14px 0 1px #16345B;
     width: 1rem; }
   .tab-bar .menu-icon span:hover:after {
-    box-shadow: 0 0 0 1px #b3b3b3, 0 7px 0 1px #b3b3b3, 0 14px 0 1px #b3b3b3; }
+    box-shadow: 0 0 0 1px #0f2440, 0 7px 0 1px #0f2440, 0 14px 0 1px #0f2440; }
 
 .left-off-canvas-menu {
   -webkit-backface-visibility: hidden;
@@ -5608,9 +5608,9 @@ ul.off-canvas-list {
     padding: 0.6666666667rem;
     transition: background 300ms ease; }
     ul.off-canvas-list li a:hover {
-      background: #4a0324; }
+      background: #b3b3b3; }
     ul.off-canvas-list li a:active {
-      background: #4a0324; }
+      background: #b3b3b3; }
 
 .move-right > .inner-wrap {
   -webkit-transform: translate3d(15.625rem, 0, 0);
@@ -6742,16 +6742,12 @@ a[href^=tel] {
   text-decoration: none; }
 
 header#page-header {
-  height: 295px;
   background: -webkit-linear-gradient(top, #ffffff 8%, rgba(255, 255, 255, 0) 100%);
   background: -moz-linear-gradient(center top, #ffffff 8%, rgba(255, 255, 255, 0) 100%);
   background: -ms-linear-gradient(top, #ffffff 8%, rgba(255, 255, 255, 0) 100%);
   position: relative;
   padding-top: 11px;
   z-index: 5; }
-  @media only screen and (max-width: 40em) {
-    header#page-header {
-      height: 185px; } }
   @media only screen and (max-width: 40em) {
     header#page-header {
       position: static; } }
@@ -6822,8 +6818,17 @@ header#page-header {
   position: relative;
   bottom: -17px; }
 
-#sm-logo img {
-  padding-top: 20px; }
+#sm-logo {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 220px;
+  top: -15px; }
+  @media only screen and (max-width: 40em) {
+    #sm-logo {
+      left: 66%; } }
+  #sm-logo img {
+    padding-top: 20px; }
 
 .golf-container {
   position: relative; }
@@ -7381,11 +7386,9 @@ main.search-results #head-img {
 
 #slideshow {
   position: relative;
-  margin-top: -295px;
   z-index: -1; }
   @media only screen and (max-width: 40em) {
     #slideshow {
-      margin-top: -140px;
       max-height: 230px; } }
   #slideshow .metaslider {
     max-height: 610px;

diff --git a/header.php b/header.php
index c7efe6d..2b0ca1f 100644 (file)
--- a/header.php
+++ b/header.php
@@ -71,7 +71,7 @@ Note 2: 'Nb cols' parameter for Bootstrap only.
                                 </a>
                             </div>
                             <div id="logo" class="medium-8 large-5 columns show-for-medium-up text-center">
-                                <a href="<?php bloginfo('url'); ?>"><img class="text-center header-logo" alt="Mount Pleasant logo" src="<?php bloginfo('template_url'); ?>/assets/logo-color.png"></a>
+                                <a class="show-for-large-up"href="<?php bloginfo('url'); ?>"><img class="text-center header-logo" alt="Mount Pleasant logo" src="<?php bloginfo('template_url'); ?>/assets/logo-color.png"></a>
                             </div>
                             <div class="search-top medium-4 columns show-for-medium-up">
                                 <?php get_template_part('parts/search');?>
@@ -85,7 +85,7 @@ Note 2: 'Nb cols' parameter for Bootstrap only.
                             </div>
                         </div>
                         <?php get_template_part('parts/top-bar');?>
-                        <a id="sm-logo" class="show-for-small-down text-center" href="<?php bloginfo('url'); ?>"><img class="header-logo" alt="Mount Pleasant logo" src="<?php bloginfo('template_url'); ?>/assets/logo-color.png"></a>
+                 
                         <?php if (get_page_template_slug( $post->ID ) == "page-golf-template.php") { ?>
                         <div id="golf-logo-img" class="row collapse">
                             <div class="small-12 text-center columns">

diff --git a/parts/top-bar.php b/parts/top-bar.php
index 78a929d..90144fb 100644 (file)
--- a/parts/top-bar.php
+++ b/parts/top-bar.php
@@ -6,5 +6,7 @@
 <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>
+       
     </section>
+    <a id="sm-logo" class="show-for-medium-down text-center" href="<?php bloginfo('url'); ?>"><img class="header-logo" alt="Mount Pleasant logo" src="<?php bloginfo('template_url'); ?>/assets/logo-color.png"></a>
 </nav>

diff --git a/scss/_page.header.scss b/scss/_page.header.scss
index fb4ac92..ea17b7d 100644 (file)
--- a/scss/_page.header.scss
+++ b/scss/_page.header.scss
@@ -1,7 +1,7 @@
 header#page-header {
-    height: 295px;
+    // height: 295px;
     @media #{$small-only} {
-        height: 185px;
+        // height: 185px;
     }
     @include gradient (rgba(white, 1), rgba($white, 0));
     position: relative;
@@ -135,6 +135,15 @@ header#page-header {
     bottom: -17px;
 }
 #sm-logo {
+    position: absolute;
+    left: 50%;
+    @media #{$small-only}{
+        left: 66%;
+    }
+   
+    transform: translateX(-50%);
+    width: 220px;
+    top: -15px;
     img {
         padding-top: 20px;
     }

diff --git a/scss/_settings.scss b/scss/_settings.scss
index 73ca03d..5bf17b2 100644 (file)
--- a/scss/_settings.scss
+++ b/scss/_settings.scss
@@ -837,11 +837,11 @@ $small-font-color: scale-color($header-font-color, $lightness: 35%);
 // Off Canvas Tab Bar Variables
 // $include-html-off-canvas-classes: $include-html-classes;
 
- $tabbar-bg: $maroon;
+ $tabbar-bg: $white;
 // $tabbar-height: rem-calc(45);
 // $tabbar-icon-width: $tabbar-height;
 // $tabbar-line-height: $tabbar-height;
-// $tabbar-color: $white;
+$tabbar-color: $revamp-blue;
 // $tabbar-middle-padding: 0 rem-calc(10);
 
 // Off Canvas Divider Styles
@@ -880,7 +880,7 @@ $small-font-color: scale-color($header-font-color, $lightness: 35%);
 // $off-canvas-back-hover-border-bottom: none;
 
 // Off Canvas Menu Icon Variables
-// $tabbar-menu-icon-color: $white;
+$tabbar-menu-icon-color: $revamp-blue;
 // $tabbar-menu-icon-hover: scale-color($tabbar-menu-icon-color, $lightness: -30%);
 
  $tabbar-menu-icon-text-indent: rem-calc(50);

diff --git a/scss/_slideshow.scss b/scss/_slideshow.scss
index 7d403ac..7d4d5db 100644 (file)
--- a/scss/_slideshow.scss
+++ b/scss/_slideshow.scss
@@ -1,10 +1,10 @@
 #slideshow {
     position: relative;
-    margin-top: -295px;
+    // margin-top: -295px;
 //    top: -185px;
     z-index: -1;
     @media #{$small-only} {
-        margin-top: -140px;
+        // margin-top: -140px;
         max-height: 230px;
     }
     .metaslider {