diff --git a/core/modules/toolbar/css/toolbar.icons.css b/core/modules/toolbar/css/toolbar.icons.css
index bd6b9b7..0aee152 100644
--- a/core/modules/toolbar/css/toolbar.icons.css
+++ b/core/modules/toolbar/css/toolbar.icons.css
@@ -1,5 +1,5 @@
 /**
- * @file toolbar.toolbar-icons.css
+ * @file toolbar.icons.css
  */
 .toolbar .toolbar-icon {
   padding-left: 2.75em; /* LTR */
diff --git a/core/modules/toolbar/js/toolbar.js b/core/modules/toolbar/js/toolbar.js
index 449ca94..56a9fde 100644
--- a/core/modules/toolbar/js/toolbar.js
+++ b/core/modules/toolbar/js/toolbar.js
@@ -121,7 +121,6 @@ Drupal.behaviors.toolbar = {
       Drupal.displace();
     });
   }
-
 };
 
 /**
@@ -154,19 +153,30 @@ Drupal.toolbar = {
   mediaQueryChangeHandler: function (model, label, mql) {
     switch (label) {
       case 'module.toolbar.narrow':
-        model.set('isOriented', mql.matches);
+        model.set({
+          'isOriented': mql.matches,
+          'isTrayToggleVisible': false
+        });
         // If the toolbar doesn't have an explicit orientation yet, or if the
         // narrow media query doesn't match then set the orientation to
         // vertical.
         if (!mql.matches || !model.get('orientation')) {
-          model.set('orientation', 'vertical');
+          model.set({'orientation': 'vertical'}, {validate: true});
         }
         break;
       case 'module.toolbar.standard':
-        model.set('isFixed', mql.matches);
+        model.set({
+          'isFixed': mql.matches
+        });
         break;
       case 'module.toolbar.wide':
-        model.set('orientation', ((mql.matches) ? 'horizontal' : 'vertical'));
+        model.set({
+          'orientation': ((mql.matches) ? 'horizontal' : 'vertical')
+        }, {validate: true});
+        // The tray orientation toggle visibility does not need to be validated.
+        model.set({
+          'isTrayToggleVisible': mql.matches
+        });
         break;
       default:
         break;
@@ -188,7 +198,7 @@ Drupal.toolbar = {
       // Indicates whether the toolbar is displayed in an oriented fashion,
       // either horizontal or vertical.
       isOriented: false,
-      // Indicated whether the toolbar is positioned absolute (false) or fixed
+      // Indicates whether the toolbar is positioned absolute (false) or fixed
       // (true).
       isFixed: false,
       // If the viewport overflow becomes constrained, such as when the overlay
@@ -202,6 +212,8 @@ Drupal.toolbar = {
       // configured breakpoints. The locked state will be maintained across page
       // loads.
       locked: false,
+      // Indicates whether the tray orientation toggle is visible.
+      isTrayToggleVisible: false,
       // The height of the toolbar.
       height: null,
       // The current viewport offsets determined by Drupal.displace(). The
@@ -217,33 +229,6 @@ Drupal.toolbar = {
 
     /**
      * {@inheritdoc}
-     *
-     * Call to set() are not automatically validated in Backbone 1.0. The option
-     * validate: true must be supplied. So we override set() and pass that option
-     * with all calls to set().
-     */
-    set: function () {
-      var args = Array.prototype.slice.call(arguments);
-      // If the changed attribute is passed as a string, then the second arg
-      // will be the new value. Pack these into an option in arg[0];
-      if (typeof args[0] === 'string') {
-        var tmp = {};
-        tmp[args[0]] = args[1];
-        args[0] = tmp;
-        // If options were passed, make them the second argument.
-        args[1] = args[2] || {};
-      }
-      // Get the options argument.
-      var options = args[1] || {};
-      // Validate all calls to set. Prefer the options provided to set().
-      args[1] = $.extend({
-        validate: true
-      }, options);
-      Backbone.Model.prototype.set.apply(this, args);
-    },
-
-    /**
-     * {@inheritdoc}
      */
     validate: function (attributes, options) {
       // Prevent the orientation being set to horizontal if it is locked, unless
@@ -315,7 +300,7 @@ Drupal.toolbar = {
     initialize: function (options) {
       this.strings = options.strings;
 
-      this.model.on('change:activeTab change:orientation change:isOriented', this.render, this);
+      this.model.on('change:activeTab change:orientation change:isOriented change:isTrayToggleVisible', this.render, this);
       this.model.on('change:mqMatches', this.onMediaQueryChange, this);
       this.model.on('change:offsets', this.adjustPlacement, this);
 
@@ -382,6 +367,7 @@ Drupal.toolbar = {
         locked: locked,
         orientation: antiOrientation
       }, {
+        validate: true,
         override: true
       });
 
@@ -465,7 +451,9 @@ Drupal.toolbar = {
       // Update the tray orientation toggle button.
       var iconClass = 'toolbar-icon-toggle-' + orientation;
       var iconAntiClass = 'toolbar-icon-toggle-' + antiOrientation;
-      this.$el.find('.toolbar-toggle-orientation button')
+      var $orientationToggle = this.$el.find('.toolbar-toggle-orientation')
+        .toggle(this.model.get('isTrayToggleVisible'));
+      $orientationToggle.find('button')
         .val(antiOrientation)
         .text(this.strings[antiOrientation])
         .removeClass(iconClass)
@@ -566,12 +554,12 @@ Drupal.toolbar = {
       var isViewportOverflowConstrained = this.model.get('isViewportOverflowConstrained');
 
       $body
-        // Apply classes to the body element that reflect the current
-        // orientation of the active toolbar. The toolbar is not oriented by
-        // default. It displays within the page flow. The vertical orientation
-        // pulls the toolbar out of the page flow and positions its elements
-        // over or around the page's content. Viewport offsets or body styling
-        // may be necessary for the vertical and horizontal orientations.
+        // We are using JavaScript to control media-query handling for two
+        // reasons: (1) Using JavaScript let's us leverage the breakpoint
+        // configurations and (2) the CSS is really complex if we try to hide
+        // some styling from browsers that don't understand CSS media queries.
+        // If we drive the CSS from classes added through JavaScript,
+        // then the CSS becomes simpler and more robust.
         .toggleClass('toolbar-vertical', (orientation === 'vertical'))
         .toggleClass('toolbar-horizontal', (isOriented && orientation === 'horizontal'))
         // When the toolbar is fixed, it will not scroll with page scrolling.
diff --git a/core/modules/toolbar/js/toolbar.menu.js b/core/modules/toolbar/js/toolbar.menu.js
index ce2f0ea..e440f23 100644
--- a/core/modules/toolbar/js/toolbar.menu.js
+++ b/core/modules/toolbar/js/toolbar.menu.js
@@ -46,7 +46,7 @@ var activeItem = drupalSettings.basePath + Drupal.encodePath(drupalSettings.curr
      *   simply toggling its presence.
      */
     function toggleList ($item, switcher) {
-      var $toggle = $item.find('> .toolbar-box > .toolbar-handle');
+      var $toggle = $item.children('.toolbar-box').children('.toolbar-handle');
       switcher = (typeof switcher !== 'undefined') ? switcher : !$item.hasClass('open');
       // Toggle the item open state.
       $item.toggleClass('open', switcher);
@@ -80,7 +80,7 @@ var activeItem = drupalSettings.basePath + Drupal.encodePath(drupalSettings.curr
         // Add a handle to each list item if it has a menu.
       $menu.find('li').each(function (index, element) {
           var $item = $(element);
-          if ($item.find('> ul.menu').length) {
+          if ($item.children('ul.menu').length) {
             var $box = $item.children('.toolbar-box');
             options.text = Drupal.t('@label', {'@label': $box.find('a').text()});
             $item.children('.toolbar-box')
@@ -102,8 +102,8 @@ var activeItem = drupalSettings.basePath + Drupal.encodePath(drupalSettings.curr
      */
     function markListLevels ($lists, level) {
       level = (!level) ? 1 : level;
-      var $lis = $lists.find('> li').addClass('level-' + level);
-      $lists = $lis.find('> ul');
+      var $lis = $lists.children('li').addClass('level-' + level);
+      $lists = $lis.children('ul');
       if ($lists.length) {
         markListLevels($lists, level + 1);
       }