diff --git a/core/modules/toolbar/css/toolbar.module.css b/core/modules/toolbar/css/toolbar.module.css
index f14f337ef8..01977c6a24 100644
--- a/core/modules/toolbar/css/toolbar.module.css
+++ b/core/modules/toolbar/css/toolbar.module.css
@@ -21,7 +21,9 @@
     display: none;
   }
 }
-
+.toolbar-loading #toolbar-administration {
+  overflow: hidden;
+}
 /**
  * Very specific overrides for Drupal system CSS.
  */
@@ -56,8 +58,8 @@
   position: relative;
   z-index: 1250;
 }
-.toolbar .toolbar-tray {
-  position: absolute;
+.toolbar-horizontal .toolbar-tray {
+  position: fixed;
   width: 100%;
   left: 0;
 }
@@ -110,6 +112,13 @@ body.toolbar-tray-open.toolbar-fixed.toolbar-vertical .toolbar-oriented {
   width: 240px;
   width: 15rem;
 }
+
+/* Flickering fix */
+body.toolbar-tray-open.toolbar-fixed.toolbar-vertical #toolbar-administration {
+  margin-left: -240px;
+  margin-left: -15rem;
+}
+
 /* Present the admin toolbar tabs horizontally as a default on user agents that
  * do not understand media queries or on user agents where JavaScript is
  * disabled. */
diff --git a/core/modules/toolbar/css/toolbar.theme.css b/core/modules/toolbar/css/toolbar.theme.css
index 981ee00a93..bedbbb7e97 100644
--- a/core/modules/toolbar/css/toolbar.theme.css
+++ b/core/modules/toolbar/css/toolbar.theme.css
@@ -57,10 +57,10 @@
 .toolbar .toolbar-tray {
   background-color: #ffffff;
 }
-.toolbar .toolbar-tray-horizontal > .toolbar-lining {
+.toolbar-horizontal .toolbar-tray > .toolbar-lining {
   padding-right: 5em; /* LTR */
 }
-[dir="rtl"] .toolbar .toolbar-tray-horizontal > .toolbar-lining {
+[dir="rtl"] .toolbar-horizontal .toolbar-tray > .toolbar-lining {
   padding-right: 0;
   padding-left: 5em;
 }
@@ -74,11 +74,11 @@
   border-right: 0 none;
   box-shadow: 1px 0 5px 2px rgba(0, 0, 0, 0.3333);
 }
-.toolbar .toolbar-tray-horizontal {
+.toolbar-horizontal .toolbar-tray {
   border-bottom: 1px solid #aaaaaa;
   box-shadow: -2px 1px 3px 1px rgba(0, 0, 0, 0.3333); /* LTR */
 }
-[dir="rtl"] .toolbar .toolbar-tray-horizontal {
+[dir="rtl"] .toolbar-horizontal .toolbar-tray {
   box-shadow: 2px 1px 3px 1px rgba(0, 0, 0, 0.3333);
 }
 .toolbar .toolbar-tray-horizontal .toolbar-tray {
@@ -101,17 +101,17 @@
 .toolbar .toolbar-menu {
   background-color: #ffffff;
 }
-.toolbar .toolbar-tray-horizontal .menu-item + .menu-item {
+.toolbar-horizontal .toolbar-tray .menu-item + .menu-item {
   border-left: 1px solid #dddddd; /* LTR */
 }
-[dir="rtl"] .toolbar .toolbar-tray-horizontal .menu-item + .menu-item {
+[dir="rtl"] .toolbar-horizontal .toolbar-tray .menu-item + .menu-item {
   border-left: 0 none ;
   border-right: 1px solid #dddddd;
 }
-.toolbar .toolbar-tray-horizontal .menu-item:last-child {
+.toolbar-horizontal .toolbar-tray .menu-item:last-child {
   border-right: 1px solid #dddddd; /* LTR */
 }
-[dir="rtl"] .toolbar .toolbar-tray-horizontal .menu-item:last-child {
+[dir="rtl"] .toolbar-horizontal .toolbar-tray .menu-item:last-child {
   border-left: 1px solid #dddddd;
 }
 .toolbar .toolbar-tray-vertical .menu-item + .menu-item {
@@ -149,10 +149,10 @@
   padding: 0;
   height: 100%;
 }
-.toolbar .toolbar-tray-horizontal .toolbar-toggle-orientation {
+.toolbar-horizontal .toolbar-tray .toolbar-toggle-orientation {
   border-left: 1px solid #c9c9c9; /* LTR */
 }
-[dir="rtl"] .toolbar .toolbar-tray-horizontal .toolbar-toggle-orientation {
+[dir="rtl"] .toolbar-horizontal .toolbar-tray .toolbar-toggle-orientation {
   border-left: 0 none;
   border-right: 1px solid #c9c9c9;
 }
diff --git a/core/modules/toolbar/js/models/ToolbarModel.js b/core/modules/toolbar/js/models/ToolbarModel.js
index 537601d8f7..a335b68787 100644
--- a/core/modules/toolbar/js/models/ToolbarModel.js
+++ b/core/modules/toolbar/js/models/ToolbarModel.js
@@ -88,7 +88,7 @@
        *
        * @type {string}
        */
-      orientation: 'vertical',
+      orientation: 'horizontal',
 
       /**
        * A tray is locked if a user toggled it to vertical. Otherwise a tray
@@ -105,7 +105,7 @@
        *
        * @type {bool}
        */
-      isTrayToggleVisible: false,
+      isTrayToggleVisible: true,
 
       /**
        * The height of the toolbar.
diff --git a/core/modules/toolbar/js/toolbar.js b/core/modules/toolbar/js/toolbar.js
index 61dddc2e41..793c35706d 100644
--- a/core/modules/toolbar/js/toolbar.js
+++ b/core/modules/toolbar/js/toolbar.js
@@ -51,10 +51,26 @@
 
         // Establish the toolbar models and views.
         var model = Drupal.toolbar.models.toolbarModel = new Drupal.toolbar.ToolbarModel({
-          locked: JSON.parse(localStorage.getItem('Drupal.toolbar.trayVerticalLocked')) || false,
+          locked: JSON.parse(localStorage.getItem('Drupal.toolbar.trayVerticalLocked')),
           activeTab: document.getElementById(JSON.parse(localStorage.getItem('Drupal.toolbar.activeTabID'))),
           height: $('#toolbar-administration').outerHeight()
         });
+
+        // Attach a listener to the configured media query breakpoints.
+        // Executes it before Drupal.toolbar.views to avoid extra rendering.
+        for (var label in options.breakpoints) {
+          if (options.breakpoints.hasOwnProperty(label)) {
+            var mq = options.breakpoints[label];
+            var mql = Drupal.toolbar.mql[label] = window.matchMedia(mq);
+            // Curry the model and the label of the media query breakpoint to
+            // the mediaQueryChangeHandler function.
+            mql.addListener(Drupal.toolbar.mediaQueryChangeHandler.bind(null, model, label));
+            // Fire the mediaQueryChangeHandler for each configured breakpoint
+            // so that they process once.
+            Drupal.toolbar.mediaQueryChangeHandler.call(null, model, label, mql);
+          }
+        }
+
         Drupal.toolbar.views.toolbarVisualView = new Drupal.toolbar.ToolbarVisualView({
           el: this,
           model: model,
@@ -89,20 +105,6 @@
           model.set('areSubtreesLoaded', true);
         });
 
-        // Attach a listener to the configured media query breakpoints.
-        for (var label in options.breakpoints) {
-          if (options.breakpoints.hasOwnProperty(label)) {
-            var mq = options.breakpoints[label];
-            var mql = Drupal.toolbar.mql[label] = window.matchMedia(mq);
-            // Curry the model and the label of the media query breakpoint to
-            // the mediaQueryChangeHandler function.
-            mql.addListener(Drupal.toolbar.mediaQueryChangeHandler.bind(null, model, label));
-            // Fire the mediaQueryChangeHandler for each configured breakpoint
-            // so that they process once.
-            Drupal.toolbar.mediaQueryChangeHandler.call(null, model, label, mql);
-          }
-        }
-
         // Trigger an initial attempt to load menu subitems. This first attempt
         // is made after the media query handlers have had an opportunity to
         // process. The toolbar starts in the vertical orientation by default,
@@ -214,7 +216,7 @@
 
         case 'toolbar.wide':
           model.set({
-            orientation: ((mql.matches) ? 'horizontal' : 'vertical')
+            orientation: ((mql.matches && !model.get('locked')) ? 'horizontal' : 'vertical')
           }, {validate: true});
           // The tray orientation toggle visibility does not need to be
           // validated.
diff --git a/core/modules/toolbar/js/views/BodyVisualView.js b/core/modules/toolbar/js/views/BodyVisualView.js
index 654359d428..cae2bf36b3 100644
--- a/core/modules/toolbar/js/views/BodyVisualView.js
+++ b/core/modules/toolbar/js/views/BodyVisualView.js
@@ -8,7 +8,6 @@
   'use strict';
 
   Drupal.toolbar.BodyVisualView = Backbone.View.extend(/** @lends Drupal.toolbar.BodyVisualView# */{
-
     /**
      * Adjusts the body element with the toolbar position and dimension changes.
      *
@@ -17,19 +16,21 @@
      * @augments Backbone.View
      */
     initialize: function () {
-      this.listenTo(this.model, 'change:orientation change:activeTray change:isOriented change:isFixed change:isViewportOverflowConstrained', this.render);
+      this.listenTo(this.model, 'change:activeTray ', this.render);
+      this.listenTo(this.model, 'change:isFixed change:isViewportOverflowConstrained', this.isToolbarFixed);
+    },
+
+    isToolbarFixed: function () {
+      // When the toolbar is fixed, it will not scroll with page scrolling.
+      var isViewportOverflowConstrained = this.model.get('isViewportOverflowConstrained');
+      $('body').toggleClass('toolbar-fixed', (isViewportOverflowConstrained || this.model.get('isFixed')));
     },
 
     /**
      * @inheritdoc
      */
     render: function () {
-      var $body = $('body');
-      var isViewportOverflowConstrained = this.model.get('isViewportOverflowConstrained');
-
-      $body
-        // When the toolbar is fixed, it will not scroll with page scrolling.
-        .toggleClass('toolbar-fixed', (isViewportOverflowConstrained || this.model.get('isFixed')))
+      $('body')
         // 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.
diff --git a/core/modules/toolbar/js/views/ToolbarVisualView.js b/core/modules/toolbar/js/views/ToolbarVisualView.js
index 265145f770..7244319f26 100644
--- a/core/modules/toolbar/js/views/ToolbarVisualView.js
+++ b/core/modules/toolbar/js/views/ToolbarVisualView.js
@@ -45,15 +45,10 @@
     initialize: function (options) {
       this.strings = options.strings;
 
-      // Put it at top to aviod extra reflow.
-      this.setToolbarHeight();
-      $('body').removeClass('toolbar-loading');
-
-      this.listenTo(this.model, 'change:activeTab  change:orientation change:isOriented change:isTrayToggleVisible', this.render);
+      this.listenTo(this.model, 'change:activeTab change:orientation change:isOriented change:isTrayToggleVisible', this.render);
       this.listenTo(this.model, 'change:mqMatches', this.onMediaQueryChange);
       this.listenTo(this.model, 'change:offsets', this.adjustPlacement);
       this.listenTo(this.model, 'change:activeTab change:orientation change:isOriented', this.updateToolbarHeight);
-      this.listenTo(this.model, 'change:height', this.setToolbarHeight);
 
       // Add the tray orientation toggles.
       this.$el
@@ -74,19 +69,11 @@
      */
     updateToolbarHeight: function () {
       this.model.set('height', $('#toolbar-bar').find('.toolbar-tab').outerHeight() + $('.is-active.toolbar-tray-horizontal').outerHeight());
-    },
 
-    /**
-     * Set the toolbar element height.
-     *
-     * @constructs
-     *
-     * @augments Backbone.View
-     */
-    setToolbarHeight: function () {
-      $('#toolbar-administration').css({
-        height: this.model.get('height')
+      $('body').css({
+        'padding-top': this.model.get('height')
       });
+
       this.triggerDisplace();
     },
 
@@ -109,6 +96,9 @@
       this.updateTabs();
       this.updateTrayOrientation();
       this.updateBarAttributes();
+
+      $('body').removeClass('toolbar-loading');
+
       // Load the subtrees if the orientation of the toolbar is changed to
       // vertical. This condition responds to the case that the toolbar switches
       // from horizontal to vertical orientation. The toolbar starts in a
@@ -249,14 +239,17 @@
       // The antiOrientation is used to render the view of action buttons like
       // the tray orientation toggle.
       var antiOrientation = (orientation === 'vertical') ? 'horizontal' : 'vertical';
+      // Update the orientation of the trays.
 
-      // Toggle body classes in early scripts execution to avoid toolbar flickering.
-      $('body').toggleClass('toolbar-vertical', (orientation === 'vertical'))
-        .toggleClass('toolbar-horizontal', (isOriented && orientation === 'horizontal'));
 
-      // Update the orientation of the trays.
+      // @droplet: Sync Body Classes in real time, not after all scripts execution.
+      $('body')
+        .toggleClass('toolbar-vertical', (orientation === 'vertical'))
+        .toggleClass('toolbar-horizontal', (orientation === 'horizontal'));
+
+      var removeClass = (antiOrientation === 'horizontal') ? 'toolbar-tray-horizontal' : 'toolbar-tray-vertical';
       var $trays = this.$el.find('.toolbar-tray')
-        .removeClass('toolbar-tray-horizontal toolbar-tray-vertical')
+        .removeClass(removeClass)
         .addClass('toolbar-tray-' + orientation);
 
       // Update the tray orientation toggle button.
diff --git a/core/modules/toolbar/toolbar.module b/core/modules/toolbar/toolbar.module
index afa4d39467..7cfcad01b2 100644
--- a/core/modules/toolbar/toolbar.module
+++ b/core/modules/toolbar/toolbar.module
@@ -284,9 +284,9 @@ function toolbar_preprocess_html(&$variables) {
     return;
   }
 
-  $variables['attributes'] = new Attribute(array(
+  $variables['attributes'] = new Attribute([
     'class' => ['toolbar-tray-open', 'toolbar-horizontal', 'toolbar-fixed', 'toolbar-loading'],
-  ));
+  ]);
 }
 
 /**
diff --git a/core/themes/stable/css/toolbar/toolbar.module.css b/core/themes/stable/css/toolbar/toolbar.module.css
index f14f337ef8..01977c6a24 100644
--- a/core/themes/stable/css/toolbar/toolbar.module.css
+++ b/core/themes/stable/css/toolbar/toolbar.module.css
@@ -21,7 +21,9 @@
     display: none;
   }
 }
-
+.toolbar-loading #toolbar-administration {
+  overflow: hidden;
+}
 /**
  * Very specific overrides for Drupal system CSS.
  */
@@ -56,8 +58,8 @@
   position: relative;
   z-index: 1250;
 }
-.toolbar .toolbar-tray {
-  position: absolute;
+.toolbar-horizontal .toolbar-tray {
+  position: fixed;
   width: 100%;
   left: 0;
 }
@@ -110,6 +112,13 @@ body.toolbar-tray-open.toolbar-fixed.toolbar-vertical .toolbar-oriented {
   width: 240px;
   width: 15rem;
 }
+
+/* Flickering fix */
+body.toolbar-tray-open.toolbar-fixed.toolbar-vertical #toolbar-administration {
+  margin-left: -240px;
+  margin-left: -15rem;
+}
+
 /* Present the admin toolbar tabs horizontally as a default on user agents that
  * do not understand media queries or on user agents where JavaScript is
  * disabled. */
diff --git a/core/themes/stable/css/toolbar/toolbar.theme.css b/core/themes/stable/css/toolbar/toolbar.theme.css
index 981ee00a93..bedbbb7e97 100644
--- a/core/themes/stable/css/toolbar/toolbar.theme.css
+++ b/core/themes/stable/css/toolbar/toolbar.theme.css
@@ -57,10 +57,10 @@
 .toolbar .toolbar-tray {
   background-color: #ffffff;
 }
-.toolbar .toolbar-tray-horizontal > .toolbar-lining {
+.toolbar-horizontal .toolbar-tray > .toolbar-lining {
   padding-right: 5em; /* LTR */
 }
-[dir="rtl"] .toolbar .toolbar-tray-horizontal > .toolbar-lining {
+[dir="rtl"] .toolbar-horizontal .toolbar-tray > .toolbar-lining {
   padding-right: 0;
   padding-left: 5em;
 }
@@ -74,11 +74,11 @@
   border-right: 0 none;
   box-shadow: 1px 0 5px 2px rgba(0, 0, 0, 0.3333);
 }
-.toolbar .toolbar-tray-horizontal {
+.toolbar-horizontal .toolbar-tray {
   border-bottom: 1px solid #aaaaaa;
   box-shadow: -2px 1px 3px 1px rgba(0, 0, 0, 0.3333); /* LTR */
 }
-[dir="rtl"] .toolbar .toolbar-tray-horizontal {
+[dir="rtl"] .toolbar-horizontal .toolbar-tray {
   box-shadow: 2px 1px 3px 1px rgba(0, 0, 0, 0.3333);
 }
 .toolbar .toolbar-tray-horizontal .toolbar-tray {
@@ -101,17 +101,17 @@
 .toolbar .toolbar-menu {
   background-color: #ffffff;
 }
-.toolbar .toolbar-tray-horizontal .menu-item + .menu-item {
+.toolbar-horizontal .toolbar-tray .menu-item + .menu-item {
   border-left: 1px solid #dddddd; /* LTR */
 }
-[dir="rtl"] .toolbar .toolbar-tray-horizontal .menu-item + .menu-item {
+[dir="rtl"] .toolbar-horizontal .toolbar-tray .menu-item + .menu-item {
   border-left: 0 none ;
   border-right: 1px solid #dddddd;
 }
-.toolbar .toolbar-tray-horizontal .menu-item:last-child {
+.toolbar-horizontal .toolbar-tray .menu-item:last-child {
   border-right: 1px solid #dddddd; /* LTR */
 }
-[dir="rtl"] .toolbar .toolbar-tray-horizontal .menu-item:last-child {
+[dir="rtl"] .toolbar-horizontal .toolbar-tray .menu-item:last-child {
   border-left: 1px solid #dddddd;
 }
 .toolbar .toolbar-tray-vertical .menu-item + .menu-item {
@@ -149,10 +149,10 @@
   padding: 0;
   height: 100%;
 }
-.toolbar .toolbar-tray-horizontal .toolbar-toggle-orientation {
+.toolbar-horizontal .toolbar-tray .toolbar-toggle-orientation {
   border-left: 1px solid #c9c9c9; /* LTR */
 }
-[dir="rtl"] .toolbar .toolbar-tray-horizontal .toolbar-toggle-orientation {
+[dir="rtl"] .toolbar-horizontal .toolbar-tray .toolbar-toggle-orientation {
   border-left: 0 none;
   border-right: 1px solid #c9c9c9;
 }