diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/application/umbsections.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/application/umbsections.directive.js
index a33796ab6d..190da7da0d 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/application/umbsections.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/application/umbsections.directive.js
@@ -12,26 +12,25 @@ function sectionsDirective($timeout, $window, navigationService, treeService, se
 
             var sectionItemsWidth = [];
             var evts = [];
-            var maxSections = 8;
 
             //setup scope vars
-            scope.maxSections = maxSections;
-            scope.overflowingSections = 0;
             scope.sections = [];
+            scope.visibleSections = 0;
             scope.currentSection = appState.getSectionState("currentSection");
-            scope.showTray = false; //appState.getGlobalState("showTray");
+            scope.showTray = false;
             scope.stickyNavigation = appState.getGlobalState("stickyNavigation");
-            scope.needTray = false;
 
             function loadSections() {
                 sectionService.getSectionsForUser()
                     .then(function (result) {
                         scope.sections = result;
+                        scope.visibleSections = scope.sections.length;
+
                         // store the width of each section so we can hide/show them based on browser width 
                         // we store them because the sections get removed from the dom and then we 
                         // can't tell when to show them gain
                         $timeout(function () {
-                            $("#applications .sections li").each(function (index) {
+                            $("#applications .sections li:not(:last)").each(function (index) {
                                 sectionItemsWidth.push($(this).outerWidth());
                             });
                         });
@@ -42,25 +41,22 @@ function sectionsDirective($timeout, $window, navigationService, treeService, se
             function calculateWidth() {
                 $timeout(function () {
                     //total width minus room for avatar, search, and help icon
-                    var windowWidth = $(window).width() - 150;
+                    var containerWidth = $(".umb-app-header").outerWidth() - $(".umb-app-header__actions").outerWidth();
+                    var trayToggleWidth = $("#applications .sections li.expand").outerWidth();
                     var sectionsWidth = 0;
-                    scope.totalSections = scope.sections.length;
-                    scope.maxSections = maxSections;
-                    scope.overflowingSections = scope.maxSections - scope.totalSections;
-                    scope.needTray = scope.sections.length > scope.maxSections;
-
+                    
                     // detect how many sections we can show on the screen
                     for (var i = 0; i < sectionItemsWidth.length; i++) {
                         var sectionItemWidth = sectionItemsWidth[i];
                         sectionsWidth += sectionItemWidth;
 
-                        if (sectionsWidth > windowWidth) {
-                            scope.needTray = true;
-                            scope.maxSections = i - 1;
-                            scope.overflowingSections = scope.maxSections - scope.totalSections;
-                            break;
+                        if (sectionsWidth + trayToggleWidth > containerWidth) {
+                            scope.visibleSections =  i;
+                            return;
                         }
                     }
+
+                    scope.visibleSections = scope.sections.length;
                 });
             }
 
@@ -134,14 +130,9 @@ function sectionsDirective($timeout, $window, navigationService, treeService, se
             };
 
             scope.currentSectionInOverflow = function () {
-                if (scope.overflowingSections === 0) {
-                    return false;
-                }
-
                 var currentSection = scope.sections.filter(s => s.alias === scope.currentSection);
 
-                return (scope.sections.indexOf(currentSection[0]) >= scope.maxSections);
-
+                return currentSection.length > 0 && scope.sections.indexOf(currentSection[0]) > scope.visibleSections - 1;
             };
 
             loadSections();
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/application/umb-sections.html b/src/Umbraco.Web.UI.Client/src/views/components/application/umb-sections.html
index 0dac7176ee..d435c6ead7 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/application/umb-sections.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/application/umb-sections.html
@@ -2,7 +2,7 @@
     <div id="applications" ng-class="{faded:stickyNavigation}">
         <ul class="sections" data-element="sections">
 
-            <li data-element="section-{{section.alias}}" ng-repeat="section in sections | limitTo: maxSections" ng-class="{current: section.alias == currentSection}">
+            <li data-element="section-{{section.alias}}" ng-repeat="section in sections | limitTo: visibleSections" ng-class="{current: section.alias == currentSection}">
                 <a href="#/{{section.alias}}"
                    ng-dblclick="sectionDblClick(section)"
                    ng-click="sectionClick($event, section)"
@@ -11,13 +11,13 @@
                 </a>
             </li>
 
-            <li data-element="section-expand" class="expand" ng-class="{ 'open': showTray === true, current: currentSectionInOverflow() }" ng-show="needTray">
+            <li data-element="section-expand" class="expand" ng-class="{ 'open': showTray === true, current: currentSectionInOverflow() }" ng-show="visibleSections < sections.length">
                 <a href="#" ng-click="trayClick()" prevent-default>
-                    <span class="section__name"><i></i><i></i><i></i></span>
+                    <span class="section__name">&bull;&bull;&bull;</span>
                 </a>
 
                 <ul id="applications-tray" class="sections-tray shadow-depth-2" ng-if="showTray" on-outside-click="trayClick()">
-                    <li ng-repeat="section in sections | limitTo: overflowingSections" ng-class="{current: section.alias == currentSection}">
+                    <li ng-repeat="section in sections | limitTo: sections.length | limitTo: -(sections.length - visibleSections)" ng-class="{current: section.alias == currentSection}">
                         <a href="#/{{section.alias}}"
                             ng-dblclick="sectionDblClick(section)"
                             ng-click="sectionClick($event, section)"