diff --git a/core/modules/toolbar/css/toolbar.module.css b/core/modules/toolbar/css/toolbar.module.css
index 69eb7c2..d9544a5 100644
--- a/core/modules/toolbar/css/toolbar.module.css
+++ b/core/modules/toolbar/css/toolbar.module.css
@@ -56,18 +56,30 @@
   position: relative;
   z-index: 1250;
 }
+.toolbar .toolbar-tray {
+  position: absolute;
+  width: 100%;
+  left:0;
+}
 /* Position the admin toolbar absolutely when the configured standard breakpoint
  * is active. The toolbar container, that contains the bar and the trays, is
  * position absolutely so that it scrolls with the page. Otherwise, on smaller
  * screens, the components of the admin toolbar are positioned statically. */
-body.toolbar-fixed .toolbar-oriented,
-.toolbar-oriented .toolbar-bar,
-.toolbar-oriented .toolbar-tray {
+.toolbar-oriented .toolbar-bar {
   left: 0;
   position: absolute;
   right: 0;
   top: 0;
 }
+.toolbar-oriented .toolbar-tray {
+  left: 0;
+  position: absolute;
+  right: 0;
+}
+/* Flickering fix */
+.toolbar .toolbar-bar .invisible.toolbar-tab .toolbar-tray {
+  position: relative;
+}
 /* Layer the bar just above the trays and above contextual link triggers. */
 .toolbar-oriented .toolbar-bar {
   z-index: 502;
@@ -180,12 +192,6 @@ body.toolbar-tray-open.toolbar-fixed.toolbar-vertical .toolbar-oriented {
   display: none;
 }
 /* When the configured standard breakpoint is active and the tray is in a
- * horizontal position, the tray is fixed to the top of the viewport and does
- * not scroll with the page contents. */
-body.toolbar-fixed .toolbar .toolbar-tray-horizontal {
-  position: fixed;
-}
-/* When the configured standard breakpoint is active and the tray is in a
  * vertical position, the tray does not scroll with the page. The contents of
  * the tray scroll within the confines of the viewport. */
 .toolbar .toolbar-tray-vertical.is-active,
@@ -258,3 +264,13 @@ body.toolbar-tray-open.toolbar-vertical.toolbar-fixed {
 [dir="rtl"] .toolbar-oriented .toolbar-tray-vertical .toolbar-toggle-orientation {
   float: left;
 }
+
+/**
+ * Toolbar home button toggle.
+ */
+.toolbar .toolbar-bar .home-toolbar-tab {
+  display: none;
+}
+.path-admin .toolbar-bar .home-toolbar-tab {
+  display: block;
+}
diff --git a/core/modules/toolbar/js/views/BodyVisualView.js b/core/modules/toolbar/js/views/BodyVisualView.js
index 64593c9..8ff0686 100644
--- a/core/modules/toolbar/js/views/BodyVisualView.js
+++ b/core/modules/toolbar/js/views/BodyVisualView.js
@@ -17,7 +17,21 @@
      * @augments Backbone.View
      */
     initialize: function () {
-      this.listenTo(this.model, 'change:orientation change:offsets change:activeTray change:isOriented change:isFixed change:isViewportOverflowConstrained', this.render);
+      this.listenTo(this.model, 'change:orientation change:activeTray change:isOriented change:isFixed change:isViewportOverflowConstrained', this.render);
+      this.listenTo(this.model, 'change:offsets', this.setToolbalHeight);
+    },
+
+    /**
+     * Adjusts the toolbar element with the toolbar position and dimension changes.
+     *
+     * @constructs
+     *
+     * @augments Backbone.View
+     */
+    setToolbalHeight: function () {
+      $('#toolbar-administration').css({
+        'height': $('#toolbar-bar .toolbar-tab').outerHeight() + $('.is-active.toolbar-tray-horizontal').outerHeight()
+      });
     },
 
     /**
@@ -44,9 +58,8 @@
         // applied when a toolbar tray is active. Padding might be applied to
         // the body element to prevent the tray from overlapping content.
         .toggleClass('toolbar-tray-open', !!this.model.get('activeTray'))
-        // Apply padding to the top of the body to offset the placement of the
-        // toolbar bar element.
-        .css('padding-top', this.model.get('offsets').top);
+
+      this.setToolbalHeight();
     }
   });
 
diff --git a/core/modules/toolbar/js/views/ToolbarVisualView.js b/core/modules/toolbar/js/views/ToolbarVisualView.js
index c3b0c85..aedcff5 100644
--- a/core/modules/toolbar/js/views/ToolbarVisualView.js
+++ b/core/modules/toolbar/js/views/ToolbarVisualView.js
@@ -246,14 +246,11 @@
     adjustPlacement: function () {
       var $trays = this.$el.find('.toolbar-tray');
       if (!this.model.get('isOriented')) {
-        $trays.css('margin-top', 0);
         $trays.removeClass('toolbar-tray-horizontal').addClass('toolbar-tray-vertical');
       }
-      else {
-        // The toolbar container is invisible. Its placement is used to
-        // determine the container for the trays.
-        $trays.css('margin-top', this.$el.find('.toolbar-bar').outerHeight());
-      }
+
+      // Remove control element.
+      $('.invisible.toolbar-tab').remove();
     },
 
     /**
diff --git a/core/modules/toolbar/src/Element/ToolbarItem.php b/core/modules/toolbar/src/Element/ToolbarItem.php
index b772193..2982e11 100644
--- a/core/modules/toolbar/src/Element/ToolbarItem.php
+++ b/core/modules/toolbar/src/Element/ToolbarItem.php
@@ -81,7 +81,12 @@ public static function preRenderToolbarItem($element) {
         $element['tray']['#wrapper_attributes'] = array();
       }
       $element['tray']['#wrapper_attributes'] += $attributes;
-      $element['tray']['#wrapper_attributes']['class'][] = 'toolbar-tray';
+      $element['tray']['#wrapper_attributes']['class'][] = 'toolbar-tray toolbar-tray-horizontal';
+
+      // Set administration item as active item to prevent toolbar flickering on page load.
+      if('toolbar-item-administration' == $id || 'toolbar-item-shadow' == $id) {
+        $element['tray']['#wrapper_attributes']['class'][] = 'is-active';
+      }
     }
 
     $element['tab']['#attributes']['class'][] = 'toolbar-item';
diff --git a/core/modules/toolbar/toolbar.module b/core/modules/toolbar/toolbar.module
index 281f3ab..932ed54 100644
--- a/core/modules/toolbar/toolbar.module
+++ b/core/modules/toolbar/toolbar.module
@@ -149,7 +149,7 @@ function toolbar_toolbar() {
       ),
     ),
     '#wrapper_attributes' => array(
-      'class' => array('hidden', 'home-toolbar-tab'),
+      'class' => array('home-toolbar-tab'),
     ),
     '#attached' => array(
       'library' => array(
@@ -205,6 +205,13 @@ function toolbar_toolbar() {
   );
   $hash_cacheability->applyTo($items['administration']);
 
+  // Cloned as control element to aviod toolbar flickering issue.
+  $items['shadow'] = $items['administration'];
+  $items['shadow']['#wrapper_attributes']['class'] = array('invisible');
+  $items['shadow']['tray']['toolbar_administration']['#attributes']['class'] = array('toolbar-menu-shadow');
+  // Place as last item.
+  $items['shadow']['#weight'] = 999;
+  $hash_cacheability->applyTo($items['shadow']);
   return $items;
 }
 
@@ -356,3 +363,14 @@ function _toolbar_get_subtrees_hash() {
   $hash = Crypt::hashBase64(serialize($subtrees));
   return [$hash, $cacheability];
 }
+
+function toolbar_preprocess_html(&$variables) {
+  if (!\Drupal::currentUser()->hasPermission('access toolbar')) {
+    return;
+  }
+  $attributes = array();
+  $attributes['class'] = 'toolbar-tray-open toolbar-horizontal';
+  $variables['attributes'] = new Attribute($attributes);
+}
+
+
diff --git a/core/themes/stable/css/toolbar/toolbar.module.css b/core/themes/stable/css/toolbar/toolbar.module.css
index 69eb7c2..d9544a5 100644
--- a/core/themes/stable/css/toolbar/toolbar.module.css
+++ b/core/themes/stable/css/toolbar/toolbar.module.css
@@ -56,18 +56,30 @@
   position: relative;
   z-index: 1250;
 }
+.toolbar .toolbar-tray {
+  position: absolute;
+  width: 100%;
+  left:0;
+}
 /* Position the admin toolbar absolutely when the configured standard breakpoint
  * is active. The toolbar container, that contains the bar and the trays, is
  * position absolutely so that it scrolls with the page. Otherwise, on smaller
  * screens, the components of the admin toolbar are positioned statically. */
-body.toolbar-fixed .toolbar-oriented,
-.toolbar-oriented .toolbar-bar,
-.toolbar-oriented .toolbar-tray {
+.toolbar-oriented .toolbar-bar {
   left: 0;
   position: absolute;
   right: 0;
   top: 0;
 }
+.toolbar-oriented .toolbar-tray {
+  left: 0;
+  position: absolute;
+  right: 0;
+}
+/* Flickering fix */
+.toolbar .toolbar-bar .invisible.toolbar-tab .toolbar-tray {
+  position: relative;
+}
 /* Layer the bar just above the trays and above contextual link triggers. */
 .toolbar-oriented .toolbar-bar {
   z-index: 502;
@@ -180,12 +192,6 @@ body.toolbar-tray-open.toolbar-fixed.toolbar-vertical .toolbar-oriented {
   display: none;
 }
 /* When the configured standard breakpoint is active and the tray is in a
- * horizontal position, the tray is fixed to the top of the viewport and does
- * not scroll with the page contents. */
-body.toolbar-fixed .toolbar .toolbar-tray-horizontal {
-  position: fixed;
-}
-/* When the configured standard breakpoint is active and the tray is in a
  * vertical position, the tray does not scroll with the page. The contents of
  * the tray scroll within the confines of the viewport. */
 .toolbar .toolbar-tray-vertical.is-active,
@@ -258,3 +264,13 @@ body.toolbar-tray-open.toolbar-vertical.toolbar-fixed {
 [dir="rtl"] .toolbar-oriented .toolbar-tray-vertical .toolbar-toggle-orientation {
   float: left;
 }
+
+/**
+ * Toolbar home button toggle.
+ */
+.toolbar .toolbar-bar .home-toolbar-tab {
+  display: none;
+}
+.path-admin .toolbar-bar .home-toolbar-tab {
+  display: block;
+}