diff --git a/core/modules/toolbar/js/toolbar.js b/core/modules/toolbar/js/toolbar.js
index 61dddc2..cc767ec 100644
--- a/core/modules/toolbar/js/toolbar.js
+++ b/core/modules/toolbar/js/toolbar.js
@@ -78,6 +78,12 @@
           strings: options.strings
         });
 
+        if(!$.cookie('toolbar')) {
+          $.cookie('toolbar', Drupal.toolbar.models.toolbarModel.get('orientation'), {
+            path: '/'
+          });
+        }
+
         // Handle the resolution of Drupal.toolbar.setSubtrees.
         // This is handled with a deferred so that the function may be invoked
         // asynchronously.
diff --git a/core/modules/toolbar/js/views/ToolbarVisualView.js b/core/modules/toolbar/js/views/ToolbarVisualView.js
index 03a33ac..54132cc 100644
--- a/core/modules/toolbar/js/views/ToolbarVisualView.js
+++ b/core/modules/toolbar/js/views/ToolbarVisualView.js
@@ -172,6 +172,10 @@
         override: true
       });
 
+      $.cookie('toolbar', antiOrientation, {
+        path: '/'
+      });
+
       event.preventDefault();
       event.stopPropagation();
     },
diff --git a/core/modules/toolbar/toolbar.libraries.yml b/core/modules/toolbar/toolbar.libraries.yml
index dcef084..f823b0b 100644
--- a/core/modules/toolbar/toolbar.libraries.yml
+++ b/core/modules/toolbar/toolbar.libraries.yml
@@ -28,6 +28,7 @@ toolbar:
     - core/matchmedia
     - core/matchmedia.addListener
     - core/jquery.once
+    - core/jquery.cookie
     - core/drupal.displace
     - toolbar/toolbar.menu
 
diff --git a/core/modules/toolbar/toolbar.module b/core/modules/toolbar/toolbar.module
index bacf236..f5643b2 100644
--- a/core/modules/toolbar/toolbar.module
+++ b/core/modules/toolbar/toolbar.module
@@ -12,6 +12,7 @@
 use Drupal\Core\Template\Attribute;
 use Drupal\Component\Utility\Crypt;
 use Drupal\Core\Url;
+use Symfony\Component\HttpFoundation\Request;
 
 /**
  * Implements hook_help().
@@ -284,9 +285,20 @@ function toolbar_preprocess_html(&$variables) {
     return;
   }
 
-  $variables['attributes'] = new Attribute(array(
-    'class' => ['toolbar-tray-open', 'toolbar-horizontal', 'toolbar-loading'],
-  ));
+  $orientation = \Drupal::request()->cookies->get('toolbar');
+
+  $attributes = array();
+  $attributes['class'][] = 'toolbar-tray-open toolbar-loading';
+
+  if($orientation == 'vertical') {
+    $attributes['class'][] = 'toolbar-vertical';
+    $attributes['class'][] = 'toolbar-fixed';
+  }
+  else {
+    $attributes['class'][] = '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 7374547..26b83a6 100644
--- a/core/themes/stable/css/toolbar/toolbar.module.css
+++ b/core/themes/stable/css/toolbar/toolbar.module.css
@@ -78,19 +78,20 @@
 }
 /* Flickering fix */
 @media (min-width:61em) {
-  .toolbar-loading .toolbar .toolbar-bar .toolbar-tab:last-child .toolbar-tray {
+  .toolbar-loading.toolbar-horizontal .toolbar .toolbar-bar .toolbar-tab:last-child .toolbar-tray {
     position: relative;
     display: block;
     z-index: -999;
     visibility: hidden;
     width: 1px;
   }
-  .toolbar-loading .toolbar .toolbar-bar .toolbar-tab:last-child .toolbar-tray .toolbar-lining {
+  .toolbar-loading.toolbar-horizontal .toolbar .toolbar-bar .toolbar-tab:last-child .toolbar-tray .toolbar-lining {
     width: 999em;
   }
-  .toolbar-loading .toolbar .toolbar-bar .home-toolbar-tab + .toolbar-tab .toolbar-tray {
+  .toolbar-loading.toolbar-horizontal .toolbar .toolbar-bar .home-toolbar-tab + .toolbar-tab .toolbar-tray {
     display: block;
   }
+
 }
 
 /* Layer the bar just above the trays and above contextual link triggers. */