diff --git a/plugins/woocommerce-admin/client/embedded.js b/plugins/woocommerce-admin/client/embedded.js
index c0803857f18..00adc961403 100644
--- a/plugins/woocommerce-admin/client/embedded.js
+++ b/plugins/woocommerce-admin/client/embedded.js
@@ -13,14 +13,18 @@ import { EmbedLayout, PrimaryLayout as NoticeArea } from './layout';
import 'store';
import 'wc-api/wp-data-store';
+const embeddedRoot = document.getElementById( 'woocommerce-embedded-root' );
+
// Render the header.
render(
,
- document.getElementById( 'woocommerce-embedded-root' )
+ embeddedRoot
);
+embeddedRoot.classList.remove( 'is-embed-loading' );
+
// Render notices just above the WP content div.
const wpBody = document.getElementById( 'wpbody-content' );
const wrap = wpBody.querySelector( '.wrap' );
diff --git a/plugins/woocommerce-admin/client/stylesheets/shared/_embed.scss b/plugins/woocommerce-admin/client/stylesheets/shared/_embed.scss
index 99574d0bc6c..e941b78b61e 100644
--- a/plugins/woocommerce-admin/client/stylesheets/shared/_embed.scss
+++ b/plugins/woocommerce-admin/client/stylesheets/shared/_embed.scss
@@ -14,6 +14,18 @@
padding: 20px;
}
+ #woocommerce-embedded-root.is-embed-loading + #wpbody .wrap {
+ padding-top: $large-header-height + 40;
+
+ @include breakpoint( '782px-960px' ) {
+ padding-top: $medium-header-height + 40;
+ }
+
+ @include breakpoint( '<782px' ) {
+ padding-top: $small-header-height + 40;
+ }
+ }
+
#screen-meta,
#screen-meta-links {
top: $large-header-height;
diff --git a/plugins/woocommerce-admin/includes/class-wc-admin-loader.php b/plugins/woocommerce-admin/includes/class-wc-admin-loader.php
index a86030542b2..e26c95726d3 100644
--- a/plugins/woocommerce-admin/includes/class-wc-admin-loader.php
+++ b/plugins/woocommerce-admin/includes/class-wc-admin-loader.php
@@ -378,7 +378,7 @@ class WC_Admin_Loader {
$sections = self::get_embed_breadcrumbs();
$sections = is_array( $sections ) ? $sections : array( $sections );
?>
-