Changeset 39129

Timestamp:

11/03/2016 10:01:46 PM (8 years ago)

Author:

davidakennedy

Message:

Twenty Seventeen: Correct issues with hidden overflow and height on site header

In -r39124, some additional issues were introduced:

• The 'overflow: hidden' on the .site-header; was added to prevent a side-scrolling issue, but it ended up cutting off the menu. It looks like the cause of the side-scroll was related to how the scroll down icon was rotated, so it's addressed by rotating the icon and not the <a>.
• Also, min-height doesn't play well with display: table; in Firefox. So it's addressed with just height.

Props laurelfulford, sami.keijonen.

See #38543.

File:

• trunk/src/wp-content/themes/twentyseventeen/style.css (modified) (4 diffs)

trunk/src/wp-content/themes/twentyseventeen/style.css

@@ -1543 +1543 @@
     background-color: #fafafa;
     position: relative;
-    overflow: hidden;
 }
 
@@ -1637 +1636 @@
 .has-header-image.home.blog .custom-header {
     display: table;
-    height: 100%;
-    min-height: 300px;
-    min-height: 75vh;
+    height: 300px;
+    height: 75vh;
     width: 100%;
 }
@@ -3258 +3256 @@
     .has-header-image.home.blog .custom-header {
         display: block;
-        min-height: 0;
+        height: auto;
     }
 
@@ -3522 +3520 @@
         position: absolute;
         right: 0;
+    }
+
+    .site-header .menu-scroll-down .icon {
         -webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */
         -ms-transform: rotate(90deg); /* IE 9 */