diff --git a/client/extensions/woocommerce/components/action-header/index.js b/client/extensions/woocommerce/components/action-header/index.js
index e299066d33a722..7dbf87899f9ed6 100644
--- a/client/extensions/woocommerce/components/action-header/index.js
+++ b/client/extensions/woocommerce/components/action-header/index.js
@@ -53,7 +53,9 @@ class ActionHeader extends React.Component {
{ site.title }
} { this.renderBreadcrumbs() } diff --git a/client/extensions/woocommerce/components/action-header/style.scss b/client/extensions/woocommerce/components/action-header/style.scss index 912f01e9da47d9..9624b271348b85 100644 --- a/client/extensions/woocommerce/components/action-header/style.scss +++ b/client/extensions/woocommerce/components/action-header/style.scss @@ -11,6 +11,10 @@ color: $gray-dark; background: $white; border-bottom: 1px solid $gray-lighten-20; + position: fixed; + z-index: z-index( 'root', '.sticky-panel.is-sticky .sticky-panel__content' ); + top: 47px; + left: 0px; @include breakpoint( ">480px" ) { padding: 8px 24px 8px 0; @@ -18,29 +22,13 @@ @include breakpoint( ">660px" ) { padding: 5px 16px; + padding-left: 0; margin: 0; - } + margin-left: 40px; - @include breakpoint( ">960px" ) { - position: fixed; - z-index: z-index( 'root', '.sticky-panel.is-sticky .sticky-panel__content' ); - width: calc(100% - 273px); - top: 47px; - left: 273px; - } - @include breakpoint( "660px-960px" ) { - position: fixed; - z-index: z-index( 'root', '.sticky-panel.is-sticky .sticky-panel__content' ); - width: calc(100% - 229px); - top: 47px; - left: 229px; - } - - @include breakpoint( "<660px" ) { - position: fixed; - z-index: z-index( 'root', '.sticky-panel.is-sticky .sticky-panel__content' ); - width: 100%; - top: 47px; + .gridicons-chevron-left { + display: none; + } } } @@ -48,10 +36,6 @@ flex-grow: 0; flex-shrink: 0; min-width: 40px; - - @include breakpoint( ">660px" ) { - display: none; - } } .action-header__content { @@ -60,6 +44,10 @@ display: flex; justify-content: flex-start; + @include breakpoint( ">660px" ) { + margin-left: -32px; + } + .site-icon { margin-right: 8px; } @@ -68,6 +56,10 @@ font-size: 10px; color: $gray-darken-10; margin: 2px 0 -3px; + + a, a:hover { + color: $gray-darken-10; + } } .action-header__breadcrumbs { @@ -92,6 +84,10 @@ overflow: hidden; text-align: right; + @include breakpoint( ">660px" ) { + margin-right: 40px; + } + .action-header__actions-list { display: flex; justify-content: flex-end; diff --git a/client/extensions/woocommerce/store-sidebar/store-ground-control.js b/client/extensions/woocommerce/store-sidebar/store-ground-control.js index 7d027206732115..a357c1cef7e616 100644 --- a/client/extensions/woocommerce/store-sidebar/store-ground-control.js +++ b/client/extensions/woocommerce/store-sidebar/store-ground-control.js @@ -28,10 +28,10 @@ const StoreGroundControl = ( { site, translate } ) => { href={ backLink } aria-label={ translate( 'Go back' ) } > -