diff --git a/app/assets/styles/ve/layout/_ve-nav.scss b/app/assets/styles/ve/layout/_ve-nav.scss
index b9fd61c68..910bef954 100644
--- a/app/assets/styles/ve/layout/_ve-nav.scss
+++ b/app/assets/styles/ve/layout/_ve-nav.scss
@@ -266,8 +266,9 @@ nav.project-level-header {
 
       a{
         padding: 0 7px 0 5px;
+        max-width: 100%;
 
-      /*Hover state over links to show it's clickable*/
+        /*Hover state over links to show it's clickable*/
         &:hover{
           text-decoration: underline;
         }
@@ -286,14 +287,14 @@ nav.project-level-header {
     .back-to-proj{
       font-size: 1.2em;
       top: .05em;
-      position: relative;    
+      position: relative;
     }
   }
 }
 
 
 /*Hide breadcrumbs for mobile*/
-@media (max-width: 900px){
+@media (max-width: 1000px){
   .breadcrumbs {
     li {
       a, span{
@@ -316,14 +317,14 @@ nav.project-level-header {
   }
 }
 
-/*Hide all but the first 2 breadcrumbs and add */
-@media (max-width: 900px) and (min-width: 700px){
+/*Hide all but the last 2 breadcrumbs */
+@media (max-width: 1000px) and (min-width: 700px){
   .breadcrumbs{
-    li:nth-child(3):after{
-      content: "\203A ...";
-    }
+    // li:nth-child(2):after{
+    //   content: "\203A ...";
+    // }
 
-    li:nth-child(2){
+    li:nth-last-child(-n+2) {
       a, span{
         display: inline-block;
       }
@@ -334,10 +335,15 @@ nav.project-level-header {
 /*Add an ellipsis after the home to show there's more */
 @media (max-width: 700px){
   .breadcrumbs{
-    li:nth-child(2):after{
-      content: "\203A ...";
+    li:nth-last-child(2){
+      a, span{
+        display: inline-block;
+      }
     }
   }
+  .navbar-right {
+    display: none;
+  }
 }
 
 
diff --git a/app/assets/styles/ve/ve-main.scss b/app/assets/styles/ve/ve-main.scss
index e3cc05793..9c22274ba 100644
--- a/app/assets/styles/ve/ve-main.scss
+++ b/app/assets/styles/ve/ve-main.scss
@@ -24,12 +24,6 @@
   display: none !important;
 }
 
-.nav_breadcrumb {
-  text-overflow: ellipsis;
-  overflow: hidden;
-  white-space: nowrap;
-}
-
 div.tooltip-inner {
   white-space: normal;
 }
diff --git a/app/js/mms/directives/veMenu.js b/app/js/mms/directives/veMenu.js
index f5a820d0e..33d496df3 100644
--- a/app/js/mms/directives/veMenu.js
+++ b/app/js/mms/directives/veMenu.js
@@ -1,7 +1,7 @@
 'use strict';
 
 angular.module('mmsApp')
-.directive('veMenu', ['CacheService','$state','$templateCache','$sce', 'UtilsService',veMenu]);
+.directive('veMenu', ['CacheService','$state','$templateCache','$sce', '$timeout', 'UtilsService',veMenu]);
 
 /**
  * @ngdoc directive
@@ -22,17 +22,16 @@ angular.module('mmsApp')
  * and tags for selected view.
  *
  */
-function veMenu(CacheService, $state, $templateCache, $sce, UtilsService) {
+function veMenu(CacheService, $state, $templateCache, $sce, $timeout, UtilsService) {
     var template = $templateCache.get('partials/mms/veMenu.html');
 
     var veMenuLink = function(scope, element, attrs) {
         scope.getHrefForProject = getHrefForProject;
         scope.getHrefForBranch = getHrefForBranch;
         scope.getHrefForTag = getHrefForTag;
-
-
         scope.htmlTooltip = $sce.trustAsHtml('Branch temporarily unavailable during duplication.');
         scope.currentProject = scope.project.name;
+
         if (scope.ref) {
             scope.currentRef = scope.ref;
             if (scope.ref.type === 'Branch') {
@@ -119,13 +118,13 @@ function veMenu(CacheService, $state, $templateCache, $sce, UtilsService) {
                 }
             }
             scope.breadcrumbs = bcrumbs.reverse();
-            // if (scope.breadcrumbs.length) {
-            //     scope.breadcrumbs[scope.breadcrumbs.length-1].showAlf = true;
-            // }
-            var eltWidth = element.parent().width();
-            var crumbcount = scope.breadcrumbs.length;
-            var liWidth = (eltWidth * 0.65)/crumbcount;
-            scope.truncateStyle={'max-width': liWidth, 'white-space': 'nowrap', 'overflow': 'hidden', 'text-overflow': 'ellipsis', 'display': 'inline-block'};
+            $timeout(function() {
+                var eltChildren = element.children().children();
+                var eltWidth = element.parent().width() - eltChildren[0].scrollWidth - eltChildren[2].scrollWidth;
+                var crumbcount = scope.breadcrumbs.length;
+                var liWidth = (eltWidth * 0.85)/crumbcount;
+                scope.truncateStyle = {'max-width': liWidth, 'white-space': 'nowrap', 'overflow': 'hidden', 'text-overflow': 'ellipsis', 'display': 'inline-block'};
+            });
         }
 
         function getHrefForProject(project) {
diff --git a/app/partials/mms/veMenu.html b/app/partials/mms/veMenu.html
index c1b4e7bf9..08586df63 100644
--- a/app/partials/mms/veMenu.html
+++ b/app/partials/mms/veMenu.html
@@ -1,75 +1,71 @@
-<nav class="project-level-header navbar navbar-inverse navbar-fixed-top" role="navigation">
-    <div class="block">
-        <div class="btn-group ve-dark-dropdown-nav select-project-dropdown" uib-dropdown keyboard-nav>
-            <button id="simple-btn-keyboard-nav" type="button" class="dropdown-toggle" ng-click="updateProjectChecked()" uib-dropdown-toggle>
-                <span class="label-dropdown">Project:</span>
-                <span class = "selected-dropdown">{{ currentProject }}<i class="fa fa-caret-down" aria-hidden="true"></i></span>
+<nav class="project-level-header navbar navbar-inverse navbar-fixed-top block" role="navigation">
+    <div class="btn-group ve-dark-dropdown-nav select-project-dropdown" uib-dropdown keyboard-nav>
+        <button id="simple-btn-keyboard-nav" type="button" class="dropdown-toggle" ng-click="updateProjectChecked()" uib-dropdown-toggle>
+            <span class="label-dropdown">Project:</span>
+            <span class = "selected-dropdown">{{ currentProject }}<i class="fa fa-caret-down" aria-hidden="true"></i></span>
+        </button>
+        <ul class="dropdown-menu list-with-selected-item" uib-dropdown-menu role="menu">
+            <li ng-repeat="project in projects | orderBy: 'name'" ng-click="updateProject(project)"
+                ng-class="{'checked-list-item': project.name === currentProject}">
+                <a ng-href="{{getHrefForProject(project);}}"> {{ project.name }} </a>
+            </li>
+        </ul>
+    </div>
+    <div class="breadcrumbs">
+        <ul>
+            <li ng-style="truncateStyle">
+                <a class="back-to-proj" ui-sref="project.ref({refId: branch.id? branch.id : 'master', search: undefined})" ui-sref-opts="{reload:true}"
+                    uib-tooltip="{{ currentProject }}" tooltip-trigger="mouseenter" tooltip-popup-delay="100" tooltip-placement="bottom">
+                    <i class="fa fa-home" aria-hidden="true"></i>
+                </a>
+            </li>
+            <li ng-style="truncateStyle" ng-show="!isRefsView()" ng-repeat="breadcrumb in breadcrumbs track by $index">
+                <span> &#8250;</span>
+                <a ui-sref="{{ breadcrumb.link }}" uib-tooltip="{{ breadcrumb.name }}" tooltip-trigger="mouseenter" tooltip-popup-delay="100" tooltip-placement="bottom">
+                    <i ng-class="{'fa fa-file': $last && breadcrumb.type === 'doc'}" aria-hidden="true"></i>{{ breadcrumb.name }}
+                </a>
+            </li>
+        </ul>
+    </div>
+
+    <div ng-show="!isRefsView()" class="nav navbar-nav navbar-right" style="padding-right: 15px">
+        <div class="btn-group ve-dark-dropdown-nav" uib-dropdown keyboard-nav auto-close="outsideClick">
+            <button id="task-selection-button" type="button" class="dropdown-toggle" uib-dropdown-toggle>
+                <span class="label-dropdown">{{ currentRef.type }}:</span>
+                <span class="selected-dropdown">{{ currentRef.name }}</span>
+                <i class="fa fa-caret-down" aria-hidden="true"></i>
             </button>
-            <ul class="dropdown-menu list-with-selected-item" uib-dropdown-menu role="menu">
-                <li ng-repeat="project in projects | orderBy: 'name'" ng-click="updateProject(project)"
-                    ng-class="{'checked-list-item': project.name === currentProject}">
-                    <a ng-href="{{getHrefForProject(project);}}"> {{ project.name }} </a>
-                </li>
-            </ul>
-        </div>
-        <div class="breadcrumbs">
-            <ul>
-                <li ng-style="truncateStyle">
-                    <a class="back-to-proj" ui-sref="project.ref({refId: branch.id? branch.id : 'master', search: undefined})" ui-sref-opts="{reload:true}">
-                        <i class="fa fa-home" aria-hidden="true"></i>
-                    </a>
+            <ul class="dropdown-menu pull-right list-with-selected-item list-with-button list-with-tabs" uib-dropdown-menu role="menu"
+                aria-labelledby="task-selection-button">
+                <li class="button-item">
+                    <button class="btn btn-large btn-block btn-primary" ng-click="refsView()">Manage Branches/Tags
+                    </button>
                 </li>
-                <li ng-style="truncateStyle" ng-show="!isRefsView()" ng-repeat="breadcrumb in breadcrumbs track by $index">
-                    <span> &#8250;</span>
-                    <a ui-sref="{{ breadcrumb.link }}">
-                        <i ng-class="{'fa fa-file': $last && breadcrumb.type === 'doc'}" aria-hidden="true" 
-                        uib-tooltip="{{ breadcrumb.name }}" tooltip-trigger="mouseenter" tooltip-popup-delay="100" tooltip-placement="bottom"></i>{{ breadcrumb.name }}
-                    </a>
-                    <!-- <span ng-if="breadcrumb.alfLink && breadcrumb.showAlf">(<a id="alfUploadLink" target="_blank" ng-href="{{breadcrumb.alfLink}}">Upload</a>)</span> -->
-                    <!--<span ng-show="!$last"> &#8250;</span>-->
+                <li class="button-item">
+                    <form class="ve-dark-minor-search">
+                        <input placeholder="Filter branches/tags" ng-model="refFilter">
+                    </form>
                 </li>
+                <uib-tabset active="active" type="tabs" justified="false">
+                    <uib-tab index="0" classes="tab-item" heading="Branches">
+                        <li ng-repeat="branch in branches | orderBy:'name' | filter:{name:refFilter} " ng-click="updateBranch(branch)"
+                            ng-class="{'checked-list-item': branch.name === currentBranch, 'branch-disabled': branch.status == 'creating'}"
+                            is-open="false" tooltip-placement="left" uib-tooltip-html="htmlTooltip"
+                            tooltip-append-to-body="branch.status == 'creating'" tooltip-enable="branch.status == 'creating'">
+                            <a ng-href="{{getHrefForBranch(branch);}}" ng-style="{display: 'block'}"> {{ branch.name }} </a>
+                        </li>
+                    </uib-tab>
+                    <uib-tab index="1" classes="tab-item" heading="Tags">
+                        <li ng-if="tags.length" ng-repeat="tag in tags | orderBy:'name' | filter:{name:refFilter}" ng-click="updateTag(tag)"
+                            ng-class="{'checked-list-item': tag.name === currentTag, 'branch-disabled': tag.status == 'creating'}"
+                            is-open="false" tooltip-placement="left" uib-tooltip-html="htmlTooltip"
+                            tooltip-append-to-body="tag.status == 'creating'" tooltip-enable="tag.status == 'creating'">
+                            <a ng-href="{{getHrefForTag(tag);}}" ng-style="{display: 'block'}"> {{ tag.name }} </a>
+                        </li>
+                        <li ng-if="!tags.length" class="ve-secondary">No Tags</li>
+                    </uib-tab>
+                </uib-tabset>
             </ul>
         </div>
-
-        <div ng-show="!isRefsView()" class="nav navbar-nav navbar-right" style="padding-right: 15px">
-            <div class="btn-group ve-dark-dropdown-nav" uib-dropdown keyboard-nav auto-close="outsideClick">
-                <button id="task-selection-button" type="button" class="dropdown-toggle" uib-dropdown-toggle>
-                    <span class="label-dropdown">{{ currentRef.type }}:</span>
-                    <span class="selected-dropdown">{{ currentRef.name }}</span>
-                    <i class="fa fa-caret-down" aria-hidden="true"></i>
-                </button>
-                <ul class="dropdown-menu pull-right list-with-selected-item list-with-button list-with-tabs" uib-dropdown-menu role="menu"
-                    aria-labelledby="task-selection-button">
-                    <li class="button-item">
-                        <button class="btn btn-large btn-block btn-primary" ng-click="refsView()">Manage Branches/Tags
-                        </button>
-                    </li>
-                    <li class="button-item">
-                        <form class="ve-dark-minor-search">
-                            <input placeholder="Filter branches/tags" ng-model="refFilter">
-                        </form>
-                    </li>
-                    <uib-tabset active="active" type="tabs" justified="false">
-                        <uib-tab index="0" classes="tab-item" heading="Branches">
-                            <li ng-repeat="branch in branches | orderBy:'name' | filter:{name:refFilter} " ng-click="updateBranch(branch)"
-                                ng-class="{'checked-list-item': branch.name === currentBranch, 'branch-disabled': branch.status == 'creating'}"
-                                is-open="false" tooltip-placement="left" uib-tooltip-html="htmlTooltip"
-                                tooltip-append-to-body="branch.status == 'creating'" tooltip-enable="branch.status == 'creating'">
-                                <a ng-href="{{getHrefForBranch(branch);}}" ng-style="{display: 'block'}"> {{ branch.name }} </a>
-                            </li>
-                        </uib-tab>
-                        <uib-tab index="1" classes="tab-item" heading="Tags">
-                            <li ng-if="tags.length" ng-repeat="tag in tags | orderBy:'name' | filter:{name:refFilter}" ng-click="updateTag(tag)"
-                                ng-class="{'checked-list-item': tag.name === currentTag, 'branch-disabled': tag.status == 'creating'}"
-                                is-open="false" tooltip-placement="left" uib-tooltip-html="htmlTooltip"
-                                tooltip-append-to-body="tag.status == 'creating'" tooltip-enable="tag.status == 'creating'">
-                                <a ng-href="{{getHrefForTag(tag);}}" ng-style="{display: 'block'}"> {{ tag.name }} </a>
-                            </li>
-                            <li ng-if="!tags.length" class="ve-secondary">No Tags</li>
-                        </uib-tab>
-                    </uib-tabset>
-                </ul>
-            </div>
-        </div>
     </div>
 </nav>
diff --git a/src/assets/styles/components/_mms-transclude.scss b/src/assets/styles/components/_mms-transclude.scss
index cf7e89910..755026253 100644
--- a/src/assets/styles/components/_mms-transclude.scss
+++ b/src/assets/styles/components/_mms-transclude.scss
@@ -55,13 +55,6 @@ mms-view.editing {
 }
 
 
-
-// Keep title the same size as reading 
-.view-title .form-control{
-  height: inherit;
-  font-size: inherit;
-}
-
 /* comments */
 mms-view mms-transclude-com,
 mms-view.editing mms-transclude-com {
diff --git a/src/assets/styles/components/_mms-view.scss b/src/assets/styles/components/_mms-view.scss
index cbf7d7aa3..e1705a818 100644
--- a/src/assets/styles/components/_mms-view.scss
+++ b/src/assets/styles/components/_mms-view.scss
@@ -1,6 +1,7 @@
 mms-view {
   .ve-view-number {
     float: left;
+    margin-right: 10px;
   }
 
   .view-title, .section-title {
@@ -11,6 +12,14 @@ mms-view {
     margin-bottom: 15px;
   }
 
+  // Keep title the same size as reading 
+  .view-title, .section-title {
+    .form-control{
+      height: inherit;
+      font-size: inherit;
+    }
+  }
+
   &.editing {
     mms-view-section {
       display: block;