From 119c36b0bd50ac774bcd734ba9127cada9390fda Mon Sep 17 00:00:00 2001 From: "David A. Kennedy" Date: Thu, 3 Nov 2016 22:01:46 +0000 Subject: [PATCH] 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 ``. * 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. git-svn-id: https://develop.svn.wordpress.org/trunk@39129 602fd350-edb4-49c9-b593-d223f7449a82 --- src/wp-content/themes/twentyseventeen/style.css | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/src/wp-content/themes/twentyseventeen/style.css b/src/wp-content/themes/twentyseventeen/style.css index b155cfa01e..acd1b61a4d 100644 --- a/src/wp-content/themes/twentyseventeen/style.css +++ b/src/wp-content/themes/twentyseventeen/style.css @@ -1542,7 +1542,6 @@ body { .site-header { background-color: #fafafa; position: relative; - overflow: hidden; } /* Site branding */ @@ -1636,9 +1635,8 @@ body:not(.title-tagline-hidden) .site-branding-text { .has-header-image.twentyseventeen-front-page .custom-header, .has-header-image.home.blog .custom-header { display: table; - height: 100%; - min-height: 300px; - min-height: 75vh; + height: 300px; + height: 75vh; width: 100%; } @@ -3257,7 +3255,7 @@ object { .has-header-image.twentyseventeen-front-page .custom-header, .has-header-image.home.blog .custom-header { display: block; - min-height: 0; + height: auto; } .custom-header-image { @@ -3521,6 +3519,9 @@ object { padding: 1em; position: absolute; right: 0; + } + + .site-header .menu-scroll-down .icon { -webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */ -ms-transform: rotate(90deg); /* IE 9 */ transform: rotate(90deg);