diff --git a/core/modules/toolbar/js/views/BodyVisualView.js b/core/modules/toolbar/js/views/BodyVisualView.js
index 64593c9..baed22b 100644
--- a/core/modules/toolbar/js/views/BodyVisualView.js
+++ b/core/modules/toolbar/js/views/BodyVisualView.js
@@ -17,7 +17,16 @@
      * @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);
+    },
+
+    setToolbalHeight: function () {
+      // Apply padding to the top of the body to offset the placement of the
+      // toolbar bar element.
+
+
+
     },
 
     /**
@@ -39,14 +48,14 @@
         .toggleClass('toolbar-vertical', (orientation === 'vertical'))
         .toggleClass('toolbar-horizontal', (isOriented && orientation === 'horizontal'))
         // When the toolbar is fixed, it will not scroll with page scrolling.
-        .toggleClass('toolbar-fixed', (isViewportOverflowConstrained || this.model.get('isFixed')))
         // Toggle the toolbar-tray-open class on the body element. The class is
         // 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);
+        //.css('padding-top', this.model.get('offsets').top);
+
     }
   });
 
diff --git a/core/modules/toolbar/js/views/ToolbarVisualView.js b/core/modules/toolbar/js/views/ToolbarVisualView.js
index c3b0c85..8010fdc 100644
--- a/core/modules/toolbar/js/views/ToolbarVisualView.js
+++ b/core/modules/toolbar/js/views/ToolbarVisualView.js
@@ -201,6 +201,10 @@
       }
       // Toggle between a basic vertical view and a more sophisticated
       // horizontal and vertical display of the toolbar bar and trays.
+
+      $('body').css({
+        'padding-top': $('#toolbar-bar').outerHeight() + $('#toolbar-item-administration-tray').outerHeight()
+      });
       this.$el.toggleClass('toolbar-oriented', isOriented);
     },
 
@@ -252,7 +256,16 @@
       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());
+
+        if($('.toolbar-tray.is-active').length) {
+          if(this.model.get('offsets').top !== $('#toolbar-item-administration-tray').outerHeight()) {
+            console.log(this.model.get('offsets').top)
+
+          }
+        }
+
       }
     },
 
diff --git a/core/modules/toolbar/src/Element/ToolbarItem.php b/core/modules/toolbar/src/Element/ToolbarItem.php
index b772193..b2c671f 100644
--- a/core/modules/toolbar/src/Element/ToolbarItem.php
+++ b/core/modules/toolbar/src/Element/ToolbarItem.php
@@ -81,7 +81,10 @@ 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';
+      if('toolbar-item-administration' == $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..31ee3ee 100644
--- a/core/modules/toolbar/toolbar.module
+++ b/core/modules/toolbar/toolbar.module
@@ -356,3 +356,17 @@ 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..ecfe071 100644
--- a/core/themes/stable/css/toolbar/toolbar.module.css
+++ b/core/themes/stable/css/toolbar/toolbar.module.css
@@ -5,6 +5,9 @@
  * Aggressive resets so we can achieve a consistent look in hostile CSS
  * environments.
  */
+#toolbar-administration {
+  visibility: hidden;
+}
 #toolbar-administration,
 #toolbar-administration * {
   box-sizing: border-box;
@@ -60,7 +63,6 @@
  * 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 {
   left: 0;