Index: lams_admin/web/WEB-INF/tags/Tabs.tag
===================================================================
diff -u -rd432ad1e56c019311c8ca428ba8e08907a56077c -rf6ec928138a1e687ccf2059e8b50f3afce8f3640
--- lams_admin/web/WEB-INF/tags/Tabs.tag	(.../Tabs.tag)	(revision d432ad1e56c019311c8ca428ba8e08907a56077c)
+++ lams_admin/web/WEB-INF/tags/Tabs.tag	(.../Tabs.tag)	(revision f6ec928138a1e687ccf2059e8b50f3afce8f3640)
@@ -53,16 +53,18 @@
 <div class="card card-default card-monitor-page">
 <div class="card-heading navbar-heading">
 	<nav class="navbar navbar-expand-md bg-primary">
- 		<div class="container-fluid">
-       		<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+ 		<div class="container-fluid" style="flex-wrap: nowrap;">
+       		<span class="navbar-brand"><c:if test="${not empty title}">${title}</c:if></span> <%-- Need span to keep the correct layout for small windows --%>
+       		
+	 		<div class="navbar-translate">
+       		<button class="ml-auto navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
       					<span class="sr-only">Toggle navigation</span>
       					<span class="navbar-toggler-icon"></span>
       					<span class="navbar-toggler-icon"></span>
       					<span class="navbar-toggler-icon"></span>
             		</button>
-			<c:if test="${not empty title}">
-          		<span class="navbar-brand">${title}</span>
-            </c:if>
+	       	</div>
+	       	
             <div class="collapse navbar-collapse" id="navbarNav">
             	<ul class="nav navbar-nav nav-tabs"  id="page-tabs" role="tablist">
                 	<jsp:doBody />
Index: lams_central/conf/scss/_lams_variables.scss
===================================================================
diff -u -r7e71d3c117c81dda7bed5a8bfb1f3e01adc3c104 -rf6ec928138a1e687ccf2059e8b50f3afce8f3640
--- lams_central/conf/scss/_lams_variables.scss	(.../_lams_variables.scss)	(revision 7e71d3c117c81dda7bed5a8bfb1f3e01adc3c104)
+++ lams_central/conf/scss/_lams_variables.scss	(.../_lams_variables.scss)	(revision f6ec928138a1e687ccf2059e8b50f3afce8f3640)
@@ -53,7 +53,8 @@
 }
     
 // dialog related
-$authoring-width-lg: 1280px;
+$dialog-width-lg: 1280px;
+$dialog-width-md: 800px;
 
 
 // 
Index: lams_central/conf/scss/_lams_variables_purple.scss
===================================================================
diff -u -r7e71d3c117c81dda7bed5a8bfb1f3e01adc3c104 -rf6ec928138a1e687ccf2059e8b50f3afce8f3640
--- lams_central/conf/scss/_lams_variables_purple.scss	(.../_lams_variables_purple.scss)	(revision 7e71d3c117c81dda7bed5a8bfb1f3e01adc3c104)
+++ lams_central/conf/scss/_lams_variables_purple.scss	(.../_lams_variables_purple.scss)	(revision f6ec928138a1e687ccf2059e8b50f3afce8f3640)
@@ -5,7 +5,8 @@
 @import "mixins.scss";
 
 // dialog related
-$authoring-width-lg: 1280px;
+$dialog-width-lg: 1280px;
+$dialog-width-md: 800px;
 
 // LAMS SASS Global Variables
 $gray-light-mid:  $grey-300; // #dddddd
Index: lams_central/conf/scss/_mixins.scss
===================================================================
diff -u -rd333f87f1b5deb8fff4c4ee1325ed4d4d36b03cf -rf6ec928138a1e687ccf2059e8b50f3afce8f3640
--- lams_central/conf/scss/_mixins.scss	(.../_mixins.scss)	(revision d333f87f1b5deb8fff4c4ee1325ed4d4d36b03cf)
+++ lams_central/conf/scss/_mixins.scss	(.../_mixins.scss)	(revision f6ec928138a1e687ccf2059e8b50f3afce8f3640)
@@ -1,7 +1,8 @@
 @import "material-kit/bootstrap/scss/mixins/float.scss";
 @import "material-kit/bootstrap/scss/mixins/breakpoints.scss";
 @import "material-kit/bootstrap/scss/mixins/buttons.scss";
-@import "material-kit/bootstrap/scss/mixins/_box-shadow.scss";
+@import "material-kit/bootstrap/scss/mixins/box-shadow.scss";
+@import "material-kit/mixins/animations.scss";
 
 	@mixin form-control-focus() {
   &:focus {
Index: lams_central/src/java/org/lamsfoundation/lams/web/DisplayGroupController.java
===================================================================
diff -u -r29a37489a63e5a95f42a5ef5fd8a7daeb65c53c5 -rf6ec928138a1e687ccf2059e8b50f3afce8f3640
--- lams_central/src/java/org/lamsfoundation/lams/web/DisplayGroupController.java	(.../DisplayGroupController.java)	(revision 29a37489a63e5a95f42a5ef5fd8a7daeb65c53c5)
+++ lams_central/src/java/org/lamsfoundation/lams/web/DisplayGroupController.java	(.../DisplayGroupController.java)	(revision f6ec928138a1e687ccf2059e8b50f3afce8f3640)
@@ -226,6 +226,8 @@
 		    "fa fa-fw fa-bolt" + (disabled ? " disabled" : ""), "index.kumalive.tooltip"));
 	}
 
+	Collections.reverse(links); // UI no longer reversing the order using pull-right
+	
 	orgBean.setLinks(links);
 	orgBean.setMoreLinks(moreLinks);
 
Index: lams_central/web/WEB-INF/tags/Tabs.tag
===================================================================
diff -u -rd432ad1e56c019311c8ca428ba8e08907a56077c -rf6ec928138a1e687ccf2059e8b50f3afce8f3640
--- lams_central/web/WEB-INF/tags/Tabs.tag	(.../Tabs.tag)	(revision d432ad1e56c019311c8ca428ba8e08907a56077c)
+++ lams_central/web/WEB-INF/tags/Tabs.tag	(.../Tabs.tag)	(revision f6ec928138a1e687ccf2059e8b50f3afce8f3640)
@@ -53,16 +53,18 @@
 <div class="card card-default card-monitor-page">
 <div class="card-heading navbar-heading">
 	<nav class="navbar navbar-expand-md bg-primary">
- 		<div class="container-fluid">
-       		<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+ 		<div class="container-fluid" style="flex-wrap: nowrap;">
+       		<span class="navbar-brand"><c:if test="${not empty title}">${title}</c:if></span> <%-- Need span to keep the correct layout for small windows --%>
+       		
+	 		<div class="navbar-translate">
+       		<button class="ml-auto navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
       					<span class="sr-only">Toggle navigation</span>
       					<span class="navbar-toggler-icon"></span>
       					<span class="navbar-toggler-icon"></span>
       					<span class="navbar-toggler-icon"></span>
             		</button>
-			<c:if test="${not empty title}">
-          		<span class="navbar-brand">${title}</span>
-            </c:if>
+	       	</div>
+	       	
             <div class="collapse navbar-collapse" id="navbarNav">
             	<ul class="nav navbar-nav nav-tabs"  id="page-tabs" role="tablist">
                 	<jsp:doBody />
Index: lams_central/web/css/_dialogs.scss
===================================================================
diff -u -r4d710be17dc384e90d10a8a57c9fe2f7c77c88e2 -rf6ec928138a1e687ccf2059e8b50f3afce8f3640
--- lams_central/web/css/_dialogs.scss	(.../_dialogs.scss)	(revision 4d710be17dc384e90d10a8a57c9fe2f7c77c88e2)
+++ lams_central/web/css/_dialogs.scss	(.../_dialogs.scss)	(revision f6ec928138a1e687ccf2059e8b50f3afce8f3640)
@@ -1,9 +1,13 @@
 /*DIALOGS*/
 
-// must make this bigger or it will restrict authoring to a width of 836px
+// must make this bigger or it will restrict authoring/monitoring to a width of 836px (lg) / 500px (md)
 @include media-breakpoint-up(lg) {
-  .modal-lg { max-width: $authoring-width-lg; }
+	.modal-dialog { max-width: $dialog-width-lg; }
+	.modal-lg { max-width: $dialog-width-lg; }
 }
+@include media-breakpoint-only(md) {
+	.modal-dialog { max-width: $dialog-width-md; }
+}
 
 .dialogContainer {
 	-webkit-overflow-scrolling: touch !important;
Index: lams_central/web/css/_learner_base.scss
===================================================================
diff -u -r7e71d3c117c81dda7bed5a8bfb1f3e01adc3c104 -rf6ec928138a1e687ccf2059e8b50f3afce8f3640
--- lams_central/web/css/_learner_base.scss	(.../_learner_base.scss)	(revision 7e71d3c117c81dda7bed5a8bfb1f3e01adc3c104)
+++ lams_central/web/css/_learner_base.scss	(.../_learner_base.scss)	(revision f6ec928138a1e687ccf2059e8b50f3afce8f3640)
@@ -337,6 +337,65 @@
   }
 }
 
+// Material Kit does not support the combination of nav-tabs on a dark background and a collapsable menu 
+// so tweak the nav-tab settings when the collapsable is shown and then we can see the buttons! Code
+// is based on _responsive.scss. Also nav tabs sets the <a class="nav-link"> to active, whereas the non nav 
+// tabs sets the <li class="nav-item"> to active. So I have added the .nav-link.active entry.
+@media all and (max-width: 767px) {
+	
+ 	   .navbar-collapse{
+			// material kit has the pull out as the whole height of the window. Make it shorter so we can see more screen contents.
+   			height: auto;
+
+	        .navbar-nav.nav-tabs{
+            position: relative;
+            z-index: 3;
+
+            .nav-item{
+                .nav-link{
+                  color: $black-color !important;
+                  margin: 5px 15px;
+                }
+
+                &.active .nav-link,
+                &.active .nav-link:hover,
+                &.active .nav-link:focus,
+                &.active .nav-link:active,
+                .nav-link.active{
+                  background-color: rgba(236, 237, 239, 1)  !important;
+                  color: $black-color  !important;
+                }
+
+                &.button-container .nav-link{
+                  margin: 15px;
+                }
+
+                &:after{
+                  width: calc(100% - 30px);
+                  content: "";
+                  display: block;
+                  height: 1px;
+                  margin-left: 15px;
+                  background-color: #e5e5e5  !important;
+                }
+
+                &:last-child {
+                    &:after{
+                        display: none;
+                    }
+                }
+            }
+        }
+    }
+   
+	.nav-open{
+    	.navbar-translate{
+            @include transform-translate-x(-200px);
+        }
+    }
+}
+
+
 /** Authoring */
 /*layout of adding a topic button */
 a.button-add-item:before {
Index: lams_central/web/css/_main_base.scss
===================================================================
diff -u -rb1983f8db0e20486771940d9412fdfadd9e4c684 -rf6ec928138a1e687ccf2059e8b50f3afce8f3640
--- lams_central/web/css/_main_base.scss	(.../_main_base.scss)	(revision b1983f8db0e20486771940d9412fdfadd9e4c684)
+++ lams_central/web/css/_main_base.scss	(.../_main_base.scss)	(revision f6ec928138a1e687ccf2059e8b50f3afce8f3640)
@@ -13,11 +13,29 @@
    	}
 }
 
-.top-nav .dropdown-menu {
-	background: $main_menu_background;
-	margin-top: -3px;
-	padding: 0px;
+// needed to override material kits setting it to transparent, extra long, for smaller screen
+@include media-breakpoint-down(sm) {
+	.top-nav .dropdown-menu {
+		background-color: $main_menu_background !important;
+		margin-top: -3px;
+		padding: 0px;
+		height: auto !important; 
+		transition: transform $bmd-menu-expand-duration $bmd-animation-curve-default,
+              opacity $bmd-menu-fade-duration $bmd-animation-curve-default !important;
+  		box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26) !important;
+	}
 }
+@include media-breakpoint-up(sm) {
+	.top-nav .dropdown-menu {
+		background-color: $main_menu_background !important;
+		margin-top: -3px;
+		padding: 0px;
+		height: auto !important; 
+		transition: transform $bmd-menu-expand-duration $bmd-animation-curve-default,
+              opacity $bmd-menu-fade-duration $bmd-animation-curve-default !important;
+  		box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26) !important;
+	}
+}
 
 #offcanvas {
 	position: fixed;
@@ -354,9 +372,13 @@
 }
 
 .course-right-buttons {
-	padding-right: 20px;
+	padding-right: 10px;
+	display: inline-flex;
 	>.btn-group {
 		margin: 5px 1px;
+		> .btn:not(.dropdown-toggle){
+			padding-right: 0;
+		}
 	}
 	.a {
 		color: #fff;
Index: lams_central/web/group.jsp
===================================================================
diff -u -rb1983f8db0e20486771940d9412fdfadd9e4c684 -rf6ec928138a1e687ccf2059e8b50f3afce8f3640
--- lams_central/web/group.jsp	(.../group.jsp)	(revision b1983f8db0e20486771940d9412fdfadd9e4c684)
+++ lams_central/web/group.jsp	(.../group.jsp)	(revision f6ec928138a1e687ccf2059e8b50f3afce8f3640)
@@ -4,7 +4,8 @@
 <%@ taglib uri="tags-core" prefix="c"%>
 <%@ taglib uri="tags-lams" prefix="lams"%>
 
-<div class="course-header card-header card-header-primary">
+<div class="course-header card-header card-header-primary d-flex align-items-center">
+	<div>
 	<span class="lead">
 		<strong><c:out value="${orgBean.name}" /></strong>
 	</span>
@@ -18,6 +19,7 @@
 			</c:otherwise>
 		</c:choose>
 	</a>
+	</div>
 	
 	<!-- Group header -->
 	<c:set var="org" value="${orgBean}" />
@@ -36,7 +38,7 @@
 	<!-- Child organisations -->
 	<c:forEach var="childOrg" items="${orgBean.childIndexOrgBeans}">
 		<div class="group-name card">
-			<div class="child-org-name card-header">
+			<div class="child-org-name card-header d-flex align-items-center">
 				<strong><c:out value="${childOrg.name}" /></strong>
 				<c:if test="${not empty childOrg.archivedDate}">
 					<small>(<fmt:message key="label.archived"/> <lams:Date value="${childOrg.archivedDate}"/>)</small>
Index: lams_central/web/groupHeader.jsp
===================================================================
diff -u -rb1983f8db0e20486771940d9412fdfadd9e4c684 -rf6ec928138a1e687ccf2059e8b50f3afce8f3640
--- lams_central/web/groupHeader.jsp	(.../groupHeader.jsp)	(revision b1983f8db0e20486771940d9412fdfadd9e4c684)
+++ lams_central/web/groupHeader.jsp	(.../groupHeader.jsp)	(revision f6ec928138a1e687ccf2059e8b50f3afce8f3640)
@@ -4,32 +4,11 @@
 <%@ taglib uri="tags-core" prefix="c"%>
 <%@ taglib uri="tags-function" prefix="fn"%>
 
-<!-- Add More options menu drop down first (if it contains links) -->
-<c:if test="${not empty org.moreLinks}">
-	<!-- bootstrap More options dropdown -->
-	<div class="course-right-buttons pull-right">
-	<div class="btn-group">
-	  <button type="button" class="btn btn-default btn-sm dropdown-toggle ${addTourClass?'tour-more-options':''}" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-fw fa-sliders" title="<fmt:message key="index.moreActions" />"></i> <span class="d-none d-sm-inline"><fmt:message key="index.moreActions" /></span> <span class="caret"></span></button>
-	  <ul id="more-links-menu" class="dropdown-menu">
-		<c:forEach var="link" items="${org.moreLinks}">
-			 <li onClick="${link.url}"
-	                      <c:if test="${not empty link.tooltip}">
-	                          title="<fmt:message key='${link.tooltip}'/>"
-	                      </c:if>
-	         >
-             	<a href="#"><i class="${link.style}"></i> <fmt:message key="${link.name}" /></a>
-             </li>
-        </c:forEach>
-  	 </ul>
-	</div>
-	</div>
-	<!-- end bootstrap More options dropdown -->
-</c:if> 
-
+<div id="course-buttons-${org.id}" class="ml-auto" >
 <c:forEach var="link" items="${org.links}">
 	<c:choose>
 		<c:when test="${link.name eq 'index.addlesson.single'}">
-			<div class="course-right-buttons pull-right">
+			<div class="course-right-buttons ">
 				<div class="btn-group" role="group">
 					<button onClick="<c:out value='${link.url}'/>" type="button" class="btn btn-default btn-sm ${addTourClass?'tour-add-lesson':''}">
 						<i class="${link.style}" title="<fmt:message key="index.addlesson" />"></i>
@@ -52,7 +31,7 @@
 			</div>
 		</c:when>
 		<c:when test="${link.name eq 'index.kumalive.teacher'}">
-			<div class="course-right-buttons pull-right">
+			<div class="course-right-buttons ">
 				<div class="btn-group" role="group" title="<fmt:message key="${link.tooltip}" />">
 					<button onClick="<c:out value='${link.url}'/>" type="button" class="btn btn-default btn-sm">
 						<i class="${link.style}"></i>
@@ -78,7 +57,7 @@
 			</div>
 		</c:when>
 		<c:when test="${link.name eq 'index.kumalive'}">
-			<div class="course-right-buttons pull-right">
+			<div class="course-right-buttons ">
                  <c:choose>
 	                <c:when test="${fn:contains(link.style, 'disabled')}">
                         <c:set var="kumaliveState" value="disabled"/>
@@ -101,7 +80,7 @@
 			</div>
 		</c:when>
 		<c:otherwise>
-			<div class="course-right-buttons pull-right">
+			<div class="course-right-buttons ">
 				<button class="btn btn-default btn-sm tour-${link.id}" onClick="<c:out value='${link.url}'/>"  type="button" 
                      <c:if test="${not empty link.tooltip}">
                      	title="<fmt:message key='${link.tooltip}'/>"
@@ -114,3 +93,27 @@
 		</c:otherwise>
 	</c:choose>
 </c:forEach>
+
+<!-- Add More options menu drop down. Appears last on screen. -->
+<c:if test="${not empty org.moreLinks}">
+	<!-- bootstrap More options dropdown -->
+	<div class="course-right-buttons ">
+	<div class="btn-group">
+	  <button type="button" class="btn btn-default btn-sm dropdown-toggle ${addTourClass?'tour-more-options':''}" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-fw fa-sliders" title="<fmt:message key="index.moreActions" />"></i> <span class="d-none d-sm-inline"><fmt:message key="index.moreActions" /></span> <span class="caret"></span></button>
+	  <ul id="more-links-menu" class="dropdown-menu">
+		<c:forEach var="link" items="${org.moreLinks}">
+			 <li onClick="${link.url}"
+	                      <c:if test="${not empty link.tooltip}">
+	                          title="<fmt:message key='${link.tooltip}'/>"
+	                      </c:if>
+	         >
+             	<a href="#"><i class="${link.style}"></i> <fmt:message key="${link.name}" /></a>
+             </li>
+        </c:forEach>
+  	 </ul>
+	</div>
+	</div>
+	<!-- end bootstrap More options dropdown -->
+</c:if> 
+
+</div>
\ No newline at end of file
Index: lams_central/web/main.jsp
===================================================================
diff -u -r6e5015d036550bcae770b2125000995c79c3dea2 -rf6ec928138a1e687ccf2059e8b50f3afce8f3640
--- lams_central/web/main.jsp	(.../main.jsp)	(revision 6e5015d036550bcae770b2125000995c79c3dea2)
+++ lams_central/web/main.jsp	(.../main.jsp)	(revision f6ec928138a1e687ccf2059e8b50f3afce8f3640)
@@ -32,6 +32,7 @@
 	<script type="text/javascript" src="${lams}includes/javascript/dialog.js"></script>
 	<script type="text/javascript" src="${lams}includes/javascript/popper.min.js"></script>
 	<script type="text/javascript" src="${lams}includes/javascript/bootstrap-material-design.min.js"></script>
+	<script type="text/javascript" src="${lams}includes/javascript/material-kit.js?v=2.0.5" type="text/javascript"></script>
 	<script type="text/javascript" src="${lams}includes/javascript/jquery.slimscroll.js"></script>
 	<script type="text/javascript" src="${lams}includes/javascript/main.js"></script>
 	<script type="text/javascript" src="${lams}includes/javascript/bootstrap-tour.min.js"></script>
@@ -160,12 +161,12 @@
         
 			<%@ include file="favoriteOrganisations.jsp"%>
             
-<%--              <c:if test="${isCourseSearchOn}"> --%>
+             <c:if test="${isCourseSearchOn}">
  			<div class="input-group offcanvas-search">
 	                	<div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-search"></i></span></div>
 						<input type="text" id="offcanvas-search-input" class="form-control input-sm" placeholder="<fmt:message key="label.search.for.courses" />..." data-column="1" type="search">
 	                </div>
- 			<%-- </c:if> --%>
+ 			</c:if>
              
             <div class="tour-organisations">
 				<lams:TSTable numColumns="2">
Index: lams_central/web/notificationsprivate.jsp
===================================================================
diff -u -rb1983f8db0e20486771940d9412fdfadd9e4c684 -rf6ec928138a1e687ccf2059e8b50f3afce8f3640
--- lams_central/web/notificationsprivate.jsp	(.../notificationsprivate.jsp)	(revision b1983f8db0e20486771940d9412fdfadd9e4c684)
+++ lams_central/web/notificationsprivate.jsp	(.../notificationsprivate.jsp)	(revision f6ec928138a1e687ccf2059e8b50f3afce8f3640)
@@ -7,9 +7,11 @@
 
 <lams:css/>
 <lams:css suffix="main"/>
-
 <script type="text/javascript" src="${lams}includes/javascript/jquery.js"></script>
-<script type="text/javascript" src="${lams}/includes/javascript/bootstrap-material-design.min.js"></script>
+<script type="text/javascript" src="${lams}includes/javascript/popper.min.js"></script>
+<script type="text/javascript" src="${lams}includes/javascript/bootstrap-material-design.min.js"></script>
+<script type="text/javascript" src="${lams}includes/javascript/material-kit.js?v=2.0.5" type="text/javascript"></script>
+
 <script type="text/javascript">
 
 	var LAMS_URL = '<lams:LAMSURL/>',
Index: lams_gradebook/web/WEB-INF/tags/Tabs.tag
===================================================================
diff -u -rd432ad1e56c019311c8ca428ba8e08907a56077c -rf6ec928138a1e687ccf2059e8b50f3afce8f3640
--- lams_gradebook/web/WEB-INF/tags/Tabs.tag	(.../Tabs.tag)	(revision d432ad1e56c019311c8ca428ba8e08907a56077c)
+++ lams_gradebook/web/WEB-INF/tags/Tabs.tag	(.../Tabs.tag)	(revision f6ec928138a1e687ccf2059e8b50f3afce8f3640)
@@ -53,16 +53,18 @@
 <div class="card card-default card-monitor-page">
 <div class="card-heading navbar-heading">
 	<nav class="navbar navbar-expand-md bg-primary">
- 		<div class="container-fluid">
-       		<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+ 		<div class="container-fluid" style="flex-wrap: nowrap;">
+       		<span class="navbar-brand"><c:if test="${not empty title}">${title}</c:if></span> <%-- Need span to keep the correct layout for small windows --%>
+       		
+	 		<div class="navbar-translate">
+       		<button class="ml-auto navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
       					<span class="sr-only">Toggle navigation</span>
       					<span class="navbar-toggler-icon"></span>
       					<span class="navbar-toggler-icon"></span>
       					<span class="navbar-toggler-icon"></span>
             		</button>
-			<c:if test="${not empty title}">
-          		<span class="navbar-brand">${title}</span>
-            </c:if>
+	       	</div>
+	       	
             <div class="collapse navbar-collapse" id="navbarNav">
             	<ul class="nav navbar-nav nav-tabs"  id="page-tabs" role="tablist">
                 	<jsp:doBody />
Index: lams_learning/web/WEB-INF/tags/Tabs.tag
===================================================================
diff -u -rd432ad1e56c019311c8ca428ba8e08907a56077c -rf6ec928138a1e687ccf2059e8b50f3afce8f3640
--- lams_learning/web/WEB-INF/tags/Tabs.tag	(.../Tabs.tag)	(revision d432ad1e56c019311c8ca428ba8e08907a56077c)
+++ lams_learning/web/WEB-INF/tags/Tabs.tag	(.../Tabs.tag)	(revision f6ec928138a1e687ccf2059e8b50f3afce8f3640)
@@ -53,16 +53,18 @@
 <div class="card card-default card-monitor-page">
 <div class="card-heading navbar-heading">
 	<nav class="navbar navbar-expand-md bg-primary">
- 		<div class="container-fluid">
-       		<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+ 		<div class="container-fluid" style="flex-wrap: nowrap;">
+       		<span class="navbar-brand"><c:if test="${not empty title}">${title}</c:if></span> <%-- Need span to keep the correct layout for small windows --%>
+       		
+	 		<div class="navbar-translate">
+       		<button class="ml-auto navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
       					<span class="sr-only">Toggle navigation</span>
       					<span class="navbar-toggler-icon"></span>
       					<span class="navbar-toggler-icon"></span>
       					<span class="navbar-toggler-icon"></span>
             		</button>
-			<c:if test="${not empty title}">
-          		<span class="navbar-brand">${title}</span>
-            </c:if>
+	       	</div>
+	       	
             <div class="collapse navbar-collapse" id="navbarNav">
             	<ul class="nav navbar-nav nav-tabs"  id="page-tabs" role="tablist">
                 	<jsp:doBody />
Index: lams_monitoring/web/WEB-INF/tags/Tabs.tag
===================================================================
diff -u -rd432ad1e56c019311c8ca428ba8e08907a56077c -rf6ec928138a1e687ccf2059e8b50f3afce8f3640
--- lams_monitoring/web/WEB-INF/tags/Tabs.tag	(.../Tabs.tag)	(revision d432ad1e56c019311c8ca428ba8e08907a56077c)
+++ lams_monitoring/web/WEB-INF/tags/Tabs.tag	(.../Tabs.tag)	(revision f6ec928138a1e687ccf2059e8b50f3afce8f3640)
@@ -53,16 +53,18 @@
 <div class="card card-default card-monitor-page">
 <div class="card-heading navbar-heading">
 	<nav class="navbar navbar-expand-md bg-primary">
- 		<div class="container-fluid">
-       		<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+ 		<div class="container-fluid" style="flex-wrap: nowrap;">
+       		<span class="navbar-brand"><c:if test="${not empty title}">${title}</c:if></span> <%-- Need span to keep the correct layout for small windows --%>
+       		
+	 		<div class="navbar-translate">
+       		<button class="ml-auto navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
       					<span class="sr-only">Toggle navigation</span>
       					<span class="navbar-toggler-icon"></span>
       					<span class="navbar-toggler-icon"></span>
       					<span class="navbar-toggler-icon"></span>
             		</button>
-			<c:if test="${not empty title}">
-          		<span class="navbar-brand">${title}</span>
-            </c:if>
+	       	</div>
+	       	
             <div class="collapse navbar-collapse" id="navbarNav">
             	<ul class="nav navbar-nav nav-tabs"  id="page-tabs" role="tablist">
                 	<jsp:doBody />
Index: lams_monitoring/web/monitor.jsp
===================================================================
diff -u -r6e5015d036550bcae770b2125000995c79c3dea2 -rf6ec928138a1e687ccf2059e8b50f3afce8f3640
--- lams_monitoring/web/monitor.jsp	(.../monitor.jsp)	(revision 6e5015d036550bcae770b2125000995c79c3dea2)
+++ lams_monitoring/web/monitor.jsp	(.../monitor.jsp)	(revision f6ec928138a1e687ccf2059e8b50f3afce8f3640)
@@ -40,6 +40,7 @@
 	<script type="text/javascript" src="<lams:WebAppURL/>includes/javascript/monitorLesson.js"></script>
 	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/popper.min.js"></script>
 	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/bootstrap-material-design.min.js"></script>
+	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/material-kit.js?v=2.0.5"></script>
 	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/bootstrap.tabcontroller.js"></script>
 	<script type="text/javascript" src="<lams:LAMSURL />includes/javascript/bootstrap-tour.min.js"></script> 
 	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/dialog.js"></script>
Index: lams_tool_assessment/web/WEB-INF/tags/Tabs.tag
===================================================================
diff -u -rd432ad1e56c019311c8ca428ba8e08907a56077c -rf6ec928138a1e687ccf2059e8b50f3afce8f3640
--- lams_tool_assessment/web/WEB-INF/tags/Tabs.tag	(.../Tabs.tag)	(revision d432ad1e56c019311c8ca428ba8e08907a56077c)
+++ lams_tool_assessment/web/WEB-INF/tags/Tabs.tag	(.../Tabs.tag)	(revision f6ec928138a1e687ccf2059e8b50f3afce8f3640)
@@ -53,16 +53,18 @@
 <div class="card card-default card-monitor-page">
 <div class="card-heading navbar-heading">
 	<nav class="navbar navbar-expand-md bg-primary">
- 		<div class="container-fluid">
-       		<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+ 		<div class="container-fluid" style="flex-wrap: nowrap;">
+       		<span class="navbar-brand"><c:if test="${not empty title}">${title}</c:if></span> <%-- Need span to keep the correct layout for small windows --%>
+       		
+	 		<div class="navbar-translate">
+       		<button class="ml-auto navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
       					<span class="sr-only">Toggle navigation</span>
       					<span class="navbar-toggler-icon"></span>
       					<span class="navbar-toggler-icon"></span>
       					<span class="navbar-toggler-icon"></span>
             		</button>
-			<c:if test="${not empty title}">
-          		<span class="navbar-brand">${title}</span>
-            </c:if>
+	       	</div>
+	       	
             <div class="collapse navbar-collapse" id="navbarNav">
             	<ul class="nav navbar-nav nav-tabs"  id="page-tabs" role="tablist">
                 	<jsp:doBody />
Index: lams_tool_chat/web/WEB-INF/tags/Tabs.tag
===================================================================
diff -u -rd432ad1e56c019311c8ca428ba8e08907a56077c -rf6ec928138a1e687ccf2059e8b50f3afce8f3640
--- lams_tool_chat/web/WEB-INF/tags/Tabs.tag	(.../Tabs.tag)	(revision d432ad1e56c019311c8ca428ba8e08907a56077c)
+++ lams_tool_chat/web/WEB-INF/tags/Tabs.tag	(.../Tabs.tag)	(revision f6ec928138a1e687ccf2059e8b50f3afce8f3640)
@@ -53,16 +53,18 @@
 <div class="card card-default card-monitor-page">
 <div class="card-heading navbar-heading">
 	<nav class="navbar navbar-expand-md bg-primary">
- 		<div class="container-fluid">
-       		<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+ 		<div class="container-fluid" style="flex-wrap: nowrap;">
+       		<span class="navbar-brand"><c:if test="${not empty title}">${title}</c:if></span> <%-- Need span to keep the correct layout for small windows --%>
+       		
+	 		<div class="navbar-translate">
+       		<button class="ml-auto navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
       					<span class="sr-only">Toggle navigation</span>
       					<span class="navbar-toggler-icon"></span>
       					<span class="navbar-toggler-icon"></span>
       					<span class="navbar-toggler-icon"></span>
             		</button>
-			<c:if test="${not empty title}">
-          		<span class="navbar-brand">${title}</span>
-            </c:if>
+	       	</div>
+	       	
             <div class="collapse navbar-collapse" id="navbarNav">
             	<ul class="nav navbar-nav nav-tabs"  id="page-tabs" role="tablist">
                 	<jsp:doBody />
Index: lams_tool_daco/web/WEB-INF/tags/Tabs.tag
===================================================================
diff -u -rd432ad1e56c019311c8ca428ba8e08907a56077c -rf6ec928138a1e687ccf2059e8b50f3afce8f3640
--- lams_tool_daco/web/WEB-INF/tags/Tabs.tag	(.../Tabs.tag)	(revision d432ad1e56c019311c8ca428ba8e08907a56077c)
+++ lams_tool_daco/web/WEB-INF/tags/Tabs.tag	(.../Tabs.tag)	(revision f6ec928138a1e687ccf2059e8b50f3afce8f3640)
@@ -53,16 +53,18 @@
 <div class="card card-default card-monitor-page">
 <div class="card-heading navbar-heading">
 	<nav class="navbar navbar-expand-md bg-primary">
- 		<div class="container-fluid">
-       		<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+ 		<div class="container-fluid" style="flex-wrap: nowrap;">
+       		<span class="navbar-brand"><c:if test="${not empty title}">${title}</c:if></span> <%-- Need span to keep the correct layout for small windows --%>
+       		
+	 		<div class="navbar-translate">
+       		<button class="ml-auto navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
       					<span class="sr-only">Toggle navigation</span>
       					<span class="navbar-toggler-icon"></span>
       					<span class="navbar-toggler-icon"></span>
       					<span class="navbar-toggler-icon"></span>
             		</button>
-			<c:if test="${not empty title}">
-          		<span class="navbar-brand">${title}</span>
-            </c:if>
+	       	</div>
+	       	
             <div class="collapse navbar-collapse" id="navbarNav">
             	<ul class="nav navbar-nav nav-tabs"  id="page-tabs" role="tablist">
                 	<jsp:doBody />
Index: lams_tool_doku/web/WEB-INF/tags/Tabs.tag
===================================================================
diff -u -rd432ad1e56c019311c8ca428ba8e08907a56077c -rf6ec928138a1e687ccf2059e8b50f3afce8f3640
--- lams_tool_doku/web/WEB-INF/tags/Tabs.tag	(.../Tabs.tag)	(revision d432ad1e56c019311c8ca428ba8e08907a56077c)
+++ lams_tool_doku/web/WEB-INF/tags/Tabs.tag	(.../Tabs.tag)	(revision f6ec928138a1e687ccf2059e8b50f3afce8f3640)
@@ -53,16 +53,18 @@
 <div class="card card-default card-monitor-page">
 <div class="card-heading navbar-heading">
 	<nav class="navbar navbar-expand-md bg-primary">
- 		<div class="container-fluid">
-       		<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+ 		<div class="container-fluid" style="flex-wrap: nowrap;">
+       		<span class="navbar-brand"><c:if test="${not empty title}">${title}</c:if></span> <%-- Need span to keep the correct layout for small windows --%>
+       		
+	 		<div class="navbar-translate">
+       		<button class="ml-auto navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
       					<span class="sr-only">Toggle navigation</span>
       					<span class="navbar-toggler-icon"></span>
       					<span class="navbar-toggler-icon"></span>
       					<span class="navbar-toggler-icon"></span>
             		</button>
-			<c:if test="${not empty title}">
-          		<span class="navbar-brand">${title}</span>
-            </c:if>
+	       	</div>
+	       	
             <div class="collapse navbar-collapse" id="navbarNav">
             	<ul class="nav navbar-nav nav-tabs"  id="page-tabs" role="tablist">
                 	<jsp:doBody />
Index: lams_tool_forum/web/WEB-INF/tags/Tabs.tag
===================================================================
diff -u -rd432ad1e56c019311c8ca428ba8e08907a56077c -rf6ec928138a1e687ccf2059e8b50f3afce8f3640
--- lams_tool_forum/web/WEB-INF/tags/Tabs.tag	(.../Tabs.tag)	(revision d432ad1e56c019311c8ca428ba8e08907a56077c)
+++ lams_tool_forum/web/WEB-INF/tags/Tabs.tag	(.../Tabs.tag)	(revision f6ec928138a1e687ccf2059e8b50f3afce8f3640)
@@ -53,16 +53,18 @@
 <div class="card card-default card-monitor-page">
 <div class="card-heading navbar-heading">
 	<nav class="navbar navbar-expand-md bg-primary">
- 		<div class="container-fluid">
-       		<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+ 		<div class="container-fluid" style="flex-wrap: nowrap;">
+       		<span class="navbar-brand"><c:if test="${not empty title}">${title}</c:if></span> <%-- Need span to keep the correct layout for small windows --%>
+       		
+	 		<div class="navbar-translate">
+       		<button class="ml-auto navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
       					<span class="sr-only">Toggle navigation</span>
       					<span class="navbar-toggler-icon"></span>
       					<span class="navbar-toggler-icon"></span>
       					<span class="navbar-toggler-icon"></span>
             		</button>
-			<c:if test="${not empty title}">
-          		<span class="navbar-brand">${title}</span>
-            </c:if>
+	       	</div>
+	       	
             <div class="collapse navbar-collapse" id="navbarNav">
             	<ul class="nav navbar-nav nav-tabs"  id="page-tabs" role="tablist">
                 	<jsp:doBody />
Index: lams_tool_gmap/web/WEB-INF/tags/Tabs.tag
===================================================================
diff -u -rd432ad1e56c019311c8ca428ba8e08907a56077c -rf6ec928138a1e687ccf2059e8b50f3afce8f3640
--- lams_tool_gmap/web/WEB-INF/tags/Tabs.tag	(.../Tabs.tag)	(revision d432ad1e56c019311c8ca428ba8e08907a56077c)
+++ lams_tool_gmap/web/WEB-INF/tags/Tabs.tag	(.../Tabs.tag)	(revision f6ec928138a1e687ccf2059e8b50f3afce8f3640)
@@ -53,16 +53,18 @@
 <div class="card card-default card-monitor-page">
 <div class="card-heading navbar-heading">
 	<nav class="navbar navbar-expand-md bg-primary">
- 		<div class="container-fluid">
-       		<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+ 		<div class="container-fluid" style="flex-wrap: nowrap;">
+       		<span class="navbar-brand"><c:if test="${not empty title}">${title}</c:if></span> <%-- Need span to keep the correct layout for small windows --%>
+       		
+	 		<div class="navbar-translate">
+       		<button class="ml-auto navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
       					<span class="sr-only">Toggle navigation</span>
       					<span class="navbar-toggler-icon"></span>
       					<span class="navbar-toggler-icon"></span>
       					<span class="navbar-toggler-icon"></span>
             		</button>
-			<c:if test="${not empty title}">
-          		<span class="navbar-brand">${title}</span>
-            </c:if>
+	       	</div>
+	       	
             <div class="collapse navbar-collapse" id="navbarNav">
             	<ul class="nav navbar-nav nav-tabs"  id="page-tabs" role="tablist">
                 	<jsp:doBody />
Index: lams_tool_images/web/WEB-INF/tags/Tabs.tag
===================================================================
diff -u -rd432ad1e56c019311c8ca428ba8e08907a56077c -rf6ec928138a1e687ccf2059e8b50f3afce8f3640
--- lams_tool_images/web/WEB-INF/tags/Tabs.tag	(.../Tabs.tag)	(revision d432ad1e56c019311c8ca428ba8e08907a56077c)
+++ lams_tool_images/web/WEB-INF/tags/Tabs.tag	(.../Tabs.tag)	(revision f6ec928138a1e687ccf2059e8b50f3afce8f3640)
@@ -53,16 +53,18 @@
 <div class="card card-default card-monitor-page">
 <div class="card-heading navbar-heading">
 	<nav class="navbar navbar-expand-md bg-primary">
- 		<div class="container-fluid">
-       		<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+ 		<div class="container-fluid" style="flex-wrap: nowrap;">
+       		<span class="navbar-brand"><c:if test="${not empty title}">${title}</c:if></span> <%-- Need span to keep the correct layout for small windows --%>
+       		
+	 		<div class="navbar-translate">
+       		<button class="ml-auto navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
       					<span class="sr-only">Toggle navigation</span>
       					<span class="navbar-toggler-icon"></span>
       					<span class="navbar-toggler-icon"></span>
       					<span class="navbar-toggler-icon"></span>
             		</button>
-			<c:if test="${not empty title}">
-          		<span class="navbar-brand">${title}</span>
-            </c:if>
+	       	</div>
+	       	
             <div class="collapse navbar-collapse" id="navbarNav">
             	<ul class="nav navbar-nav nav-tabs"  id="page-tabs" role="tablist">
                 	<jsp:doBody />
Index: lams_tool_imscc/web/WEB-INF/tags/Tabs.tag
===================================================================
diff -u -rd432ad1e56c019311c8ca428ba8e08907a56077c -rf6ec928138a1e687ccf2059e8b50f3afce8f3640
--- lams_tool_imscc/web/WEB-INF/tags/Tabs.tag	(.../Tabs.tag)	(revision d432ad1e56c019311c8ca428ba8e08907a56077c)
+++ lams_tool_imscc/web/WEB-INF/tags/Tabs.tag	(.../Tabs.tag)	(revision f6ec928138a1e687ccf2059e8b50f3afce8f3640)
@@ -53,16 +53,18 @@
 <div class="card card-default card-monitor-page">
 <div class="card-heading navbar-heading">
 	<nav class="navbar navbar-expand-md bg-primary">
- 		<div class="container-fluid">
-       		<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+ 		<div class="container-fluid" style="flex-wrap: nowrap;">
+       		<span class="navbar-brand"><c:if test="${not empty title}">${title}</c:if></span> <%-- Need span to keep the correct layout for small windows --%>
+       		
+	 		<div class="navbar-translate">
+       		<button class="ml-auto navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
       					<span class="sr-only">Toggle navigation</span>
       					<span class="navbar-toggler-icon"></span>
       					<span class="navbar-toggler-icon"></span>
       					<span class="navbar-toggler-icon"></span>
             		</button>
-			<c:if test="${not empty title}">
-          		<span class="navbar-brand">${title}</span>
-            </c:if>
+	       	</div>
+	       	
             <div class="collapse navbar-collapse" id="navbarNav">
             	<ul class="nav navbar-nav nav-tabs"  id="page-tabs" role="tablist">
                 	<jsp:doBody />
Index: lams_tool_lamc/web/WEB-INF/tags/Tabs.tag
===================================================================
diff -u -rd432ad1e56c019311c8ca428ba8e08907a56077c -rf6ec928138a1e687ccf2059e8b50f3afce8f3640
--- lams_tool_lamc/web/WEB-INF/tags/Tabs.tag	(.../Tabs.tag)	(revision d432ad1e56c019311c8ca428ba8e08907a56077c)
+++ lams_tool_lamc/web/WEB-INF/tags/Tabs.tag	(.../Tabs.tag)	(revision f6ec928138a1e687ccf2059e8b50f3afce8f3640)
@@ -53,16 +53,18 @@
 <div class="card card-default card-monitor-page">
 <div class="card-heading navbar-heading">
 	<nav class="navbar navbar-expand-md bg-primary">
- 		<div class="container-fluid">
-       		<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+ 		<div class="container-fluid" style="flex-wrap: nowrap;">
+       		<span class="navbar-brand"><c:if test="${not empty title}">${title}</c:if></span> <%-- Need span to keep the correct layout for small windows --%>
+       		
+	 		<div class="navbar-translate">
+       		<button class="ml-auto navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
       					<span class="sr-only">Toggle navigation</span>
       					<span class="navbar-toggler-icon"></span>
       					<span class="navbar-toggler-icon"></span>
       					<span class="navbar-toggler-icon"></span>
             		</button>
-			<c:if test="${not empty title}">
-          		<span class="navbar-brand">${title}</span>
-            </c:if>
+	       	</div>
+	       	
             <div class="collapse navbar-collapse" id="navbarNav">
             	<ul class="nav navbar-nav nav-tabs"  id="page-tabs" role="tablist">
                 	<jsp:doBody />
Index: lams_tool_laqa/web/WEB-INF/tags/Tabs.tag
===================================================================
diff -u -rd432ad1e56c019311c8ca428ba8e08907a56077c -rf6ec928138a1e687ccf2059e8b50f3afce8f3640
--- lams_tool_laqa/web/WEB-INF/tags/Tabs.tag	(.../Tabs.tag)	(revision d432ad1e56c019311c8ca428ba8e08907a56077c)
+++ lams_tool_laqa/web/WEB-INF/tags/Tabs.tag	(.../Tabs.tag)	(revision f6ec928138a1e687ccf2059e8b50f3afce8f3640)
@@ -53,16 +53,18 @@
 <div class="card card-default card-monitor-page">
 <div class="card-heading navbar-heading">
 	<nav class="navbar navbar-expand-md bg-primary">
- 		<div class="container-fluid">
-       		<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+ 		<div class="container-fluid" style="flex-wrap: nowrap;">
+       		<span class="navbar-brand"><c:if test="${not empty title}">${title}</c:if></span> <%-- Need span to keep the correct layout for small windows --%>
+       		
+	 		<div class="navbar-translate">
+       		<button class="ml-auto navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
       					<span class="sr-only">Toggle navigation</span>
       					<span class="navbar-toggler-icon"></span>
       					<span class="navbar-toggler-icon"></span>
       					<span class="navbar-toggler-icon"></span>
             		</button>
-			<c:if test="${not empty title}">
-          		<span class="navbar-brand">${title}</span>
-            </c:if>
+	       	</div>
+	       	
             <div class="collapse navbar-collapse" id="navbarNav">
             	<ul class="nav navbar-nav nav-tabs"  id="page-tabs" role="tablist">
                 	<jsp:doBody />
Index: lams_tool_larsrc/web/WEB-INF/tags/Tabs.tag
===================================================================
diff -u -rd432ad1e56c019311c8ca428ba8e08907a56077c -rf6ec928138a1e687ccf2059e8b50f3afce8f3640
--- lams_tool_larsrc/web/WEB-INF/tags/Tabs.tag	(.../Tabs.tag)	(revision d432ad1e56c019311c8ca428ba8e08907a56077c)
+++ lams_tool_larsrc/web/WEB-INF/tags/Tabs.tag	(.../Tabs.tag)	(revision f6ec928138a1e687ccf2059e8b50f3afce8f3640)
@@ -53,16 +53,18 @@
 <div class="card card-default card-monitor-page">
 <div class="card-heading navbar-heading">
 	<nav class="navbar navbar-expand-md bg-primary">
- 		<div class="container-fluid">
-       		<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+ 		<div class="container-fluid" style="flex-wrap: nowrap;">
+       		<span class="navbar-brand"><c:if test="${not empty title}">${title}</c:if></span> <%-- Need span to keep the correct layout for small windows --%>
+       		
+	 		<div class="navbar-translate">
+       		<button class="ml-auto navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
       					<span class="sr-only">Toggle navigation</span>
       					<span class="navbar-toggler-icon"></span>
       					<span class="navbar-toggler-icon"></span>
       					<span class="navbar-toggler-icon"></span>
             		</button>
-			<c:if test="${not empty title}">
-          		<span class="navbar-brand">${title}</span>
-            </c:if>
+	       	</div>
+	       	
             <div class="collapse navbar-collapse" id="navbarNav">
             	<ul class="nav navbar-nav nav-tabs"  id="page-tabs" role="tablist">
                 	<jsp:doBody />
Index: lams_tool_leader/web/WEB-INF/tags/Tabs.tag
===================================================================
diff -u -rd432ad1e56c019311c8ca428ba8e08907a56077c -rf6ec928138a1e687ccf2059e8b50f3afce8f3640
--- lams_tool_leader/web/WEB-INF/tags/Tabs.tag	(.../Tabs.tag)	(revision d432ad1e56c019311c8ca428ba8e08907a56077c)
+++ lams_tool_leader/web/WEB-INF/tags/Tabs.tag	(.../Tabs.tag)	(revision f6ec928138a1e687ccf2059e8b50f3afce8f3640)
@@ -53,16 +53,18 @@
 <div class="card card-default card-monitor-page">
 <div class="card-heading navbar-heading">
 	<nav class="navbar navbar-expand-md bg-primary">
- 		<div class="container-fluid">
-       		<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+ 		<div class="container-fluid" style="flex-wrap: nowrap;">
+       		<span class="navbar-brand"><c:if test="${not empty title}">${title}</c:if></span> <%-- Need span to keep the correct layout for small windows --%>
+       		
+	 		<div class="navbar-translate">
+       		<button class="ml-auto navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
       					<span class="sr-only">Toggle navigation</span>
       					<span class="navbar-toggler-icon"></span>
       					<span class="navbar-toggler-icon"></span>
       					<span class="navbar-toggler-icon"></span>
             		</button>
-			<c:if test="${not empty title}">
-          		<span class="navbar-brand">${title}</span>
-            </c:if>
+	       	</div>
+	       	
             <div class="collapse navbar-collapse" id="navbarNav">
             	<ul class="nav navbar-nav nav-tabs"  id="page-tabs" role="tablist">
                 	<jsp:doBody />
Index: lams_tool_mindmap/web/WEB-INF/tags/Tabs.tag
===================================================================
diff -u -rd432ad1e56c019311c8ca428ba8e08907a56077c -rf6ec928138a1e687ccf2059e8b50f3afce8f3640
--- lams_tool_mindmap/web/WEB-INF/tags/Tabs.tag	(.../Tabs.tag)	(revision d432ad1e56c019311c8ca428ba8e08907a56077c)
+++ lams_tool_mindmap/web/WEB-INF/tags/Tabs.tag	(.../Tabs.tag)	(revision f6ec928138a1e687ccf2059e8b50f3afce8f3640)
@@ -53,16 +53,18 @@
 <div class="card card-default card-monitor-page">
 <div class="card-heading navbar-heading">
 	<nav class="navbar navbar-expand-md bg-primary">
- 		<div class="container-fluid">
-       		<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+ 		<div class="container-fluid" style="flex-wrap: nowrap;">
+       		<span class="navbar-brand"><c:if test="${not empty title}">${title}</c:if></span> <%-- Need span to keep the correct layout for small windows --%>
+       		
+	 		<div class="navbar-translate">
+       		<button class="ml-auto navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
       					<span class="sr-only">Toggle navigation</span>
       					<span class="navbar-toggler-icon"></span>
       					<span class="navbar-toggler-icon"></span>
       					<span class="navbar-toggler-icon"></span>
             		</button>
-			<c:if test="${not empty title}">
-          		<span class="navbar-brand">${title}</span>
-            </c:if>
+	       	</div>
+	       	
             <div class="collapse navbar-collapse" id="navbarNav">
             	<ul class="nav navbar-nav nav-tabs"  id="page-tabs" role="tablist">
                 	<jsp:doBody />
Index: lams_tool_nb/web/WEB-INF/tags/Tabs.tag
===================================================================
diff -u -rd432ad1e56c019311c8ca428ba8e08907a56077c -rf6ec928138a1e687ccf2059e8b50f3afce8f3640
--- lams_tool_nb/web/WEB-INF/tags/Tabs.tag	(.../Tabs.tag)	(revision d432ad1e56c019311c8ca428ba8e08907a56077c)
+++ lams_tool_nb/web/WEB-INF/tags/Tabs.tag	(.../Tabs.tag)	(revision f6ec928138a1e687ccf2059e8b50f3afce8f3640)
@@ -53,16 +53,18 @@
 <div class="card card-default card-monitor-page">
 <div class="card-heading navbar-heading">
 	<nav class="navbar navbar-expand-md bg-primary">
- 		<div class="container-fluid">
-       		<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+ 		<div class="container-fluid" style="flex-wrap: nowrap;">
+       		<span class="navbar-brand"><c:if test="${not empty title}">${title}</c:if></span> <%-- Need span to keep the correct layout for small windows --%>
+       		
+	 		<div class="navbar-translate">
+       		<button class="ml-auto navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
       					<span class="sr-only">Toggle navigation</span>
       					<span class="navbar-toggler-icon"></span>
       					<span class="navbar-toggler-icon"></span>
       					<span class="navbar-toggler-icon"></span>
             		</button>
-			<c:if test="${not empty title}">
-          		<span class="navbar-brand">${title}</span>
-            </c:if>
+	       	</div>
+	       	
             <div class="collapse navbar-collapse" id="navbarNav">
             	<ul class="nav navbar-nav nav-tabs"  id="page-tabs" role="tablist">
                 	<jsp:doBody />
Index: lams_tool_notebook/web/WEB-INF/tags/Tabs.tag
===================================================================
diff -u -rd432ad1e56c019311c8ca428ba8e08907a56077c -rf6ec928138a1e687ccf2059e8b50f3afce8f3640
--- lams_tool_notebook/web/WEB-INF/tags/Tabs.tag	(.../Tabs.tag)	(revision d432ad1e56c019311c8ca428ba8e08907a56077c)
+++ lams_tool_notebook/web/WEB-INF/tags/Tabs.tag	(.../Tabs.tag)	(revision f6ec928138a1e687ccf2059e8b50f3afce8f3640)
@@ -53,16 +53,18 @@
 <div class="card card-default card-monitor-page">
 <div class="card-heading navbar-heading">
 	<nav class="navbar navbar-expand-md bg-primary">
- 		<div class="container-fluid">
-       		<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+ 		<div class="container-fluid" style="flex-wrap: nowrap;">
+       		<span class="navbar-brand"><c:if test="${not empty title}">${title}</c:if></span> <%-- Need span to keep the correct layout for small windows --%>
+       		
+	 		<div class="navbar-translate">
+       		<button class="ml-auto navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
       					<span class="sr-only">Toggle navigation</span>
       					<span class="navbar-toggler-icon"></span>
       					<span class="navbar-toggler-icon"></span>
       					<span class="navbar-toggler-icon"></span>
             		</button>
-			<c:if test="${not empty title}">
-          		<span class="navbar-brand">${title}</span>
-            </c:if>
+	       	</div>
+	       	
             <div class="collapse navbar-collapse" id="navbarNav">
             	<ul class="nav navbar-nav nav-tabs"  id="page-tabs" role="tablist">
                 	<jsp:doBody />
Index: lams_tool_pixlr/web/WEB-INF/tags/Tabs.tag
===================================================================
diff -u -rd432ad1e56c019311c8ca428ba8e08907a56077c -rf6ec928138a1e687ccf2059e8b50f3afce8f3640
--- lams_tool_pixlr/web/WEB-INF/tags/Tabs.tag	(.../Tabs.tag)	(revision d432ad1e56c019311c8ca428ba8e08907a56077c)
+++ lams_tool_pixlr/web/WEB-INF/tags/Tabs.tag	(.../Tabs.tag)	(revision f6ec928138a1e687ccf2059e8b50f3afce8f3640)
@@ -53,16 +53,18 @@
 <div class="card card-default card-monitor-page">
 <div class="card-heading navbar-heading">
 	<nav class="navbar navbar-expand-md bg-primary">
- 		<div class="container-fluid">
-       		<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+ 		<div class="container-fluid" style="flex-wrap: nowrap;">
+       		<span class="navbar-brand"><c:if test="${not empty title}">${title}</c:if></span> <%-- Need span to keep the correct layout for small windows --%>
+       		
+	 		<div class="navbar-translate">
+       		<button class="ml-auto navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
       					<span class="sr-only">Toggle navigation</span>
       					<span class="navbar-toggler-icon"></span>
       					<span class="navbar-toggler-icon"></span>
       					<span class="navbar-toggler-icon"></span>
             		</button>
-			<c:if test="${not empty title}">
-          		<span class="navbar-brand">${title}</span>
-            </c:if>
+	       	</div>
+	       	
             <div class="collapse navbar-collapse" id="navbarNav">
             	<ul class="nav navbar-nav nav-tabs"  id="page-tabs" role="tablist">
                 	<jsp:doBody />
Index: lams_tool_preview/web/WEB-INF/tags/Tabs.tag
===================================================================
diff -u -rd432ad1e56c019311c8ca428ba8e08907a56077c -rf6ec928138a1e687ccf2059e8b50f3afce8f3640
--- lams_tool_preview/web/WEB-INF/tags/Tabs.tag	(.../Tabs.tag)	(revision d432ad1e56c019311c8ca428ba8e08907a56077c)
+++ lams_tool_preview/web/WEB-INF/tags/Tabs.tag	(.../Tabs.tag)	(revision f6ec928138a1e687ccf2059e8b50f3afce8f3640)
@@ -53,16 +53,18 @@
 <div class="card card-default card-monitor-page">
 <div class="card-heading navbar-heading">
 	<nav class="navbar navbar-expand-md bg-primary">
- 		<div class="container-fluid">
-       		<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+ 		<div class="container-fluid" style="flex-wrap: nowrap;">
+       		<span class="navbar-brand"><c:if test="${not empty title}">${title}</c:if></span> <%-- Need span to keep the correct layout for small windows --%>
+       		
+	 		<div class="navbar-translate">
+       		<button class="ml-auto navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
       					<span class="sr-only">Toggle navigation</span>
       					<span class="navbar-toggler-icon"></span>
       					<span class="navbar-toggler-icon"></span>
       					<span class="navbar-toggler-icon"></span>
             		</button>
-			<c:if test="${not empty title}">
-          		<span class="navbar-brand">${title}</span>
-            </c:if>
+	       	</div>
+	       	
             <div class="collapse navbar-collapse" id="navbarNav">
             	<ul class="nav navbar-nav nav-tabs"  id="page-tabs" role="tablist">
                 	<jsp:doBody />
Index: lams_tool_sbmt/web/WEB-INF/tags/Tabs.tag
===================================================================
diff -u -rd432ad1e56c019311c8ca428ba8e08907a56077c -rf6ec928138a1e687ccf2059e8b50f3afce8f3640
--- lams_tool_sbmt/web/WEB-INF/tags/Tabs.tag	(.../Tabs.tag)	(revision d432ad1e56c019311c8ca428ba8e08907a56077c)
+++ lams_tool_sbmt/web/WEB-INF/tags/Tabs.tag	(.../Tabs.tag)	(revision f6ec928138a1e687ccf2059e8b50f3afce8f3640)
@@ -53,16 +53,18 @@
 <div class="card card-default card-monitor-page">
 <div class="card-heading navbar-heading">
 	<nav class="navbar navbar-expand-md bg-primary">
- 		<div class="container-fluid">
-       		<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+ 		<div class="container-fluid" style="flex-wrap: nowrap;">
+       		<span class="navbar-brand"><c:if test="${not empty title}">${title}</c:if></span> <%-- Need span to keep the correct layout for small windows --%>
+       		
+	 		<div class="navbar-translate">
+       		<button class="ml-auto navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
       					<span class="sr-only">Toggle navigation</span>
       					<span class="navbar-toggler-icon"></span>
       					<span class="navbar-toggler-icon"></span>
       					<span class="navbar-toggler-icon"></span>
             		</button>
-			<c:if test="${not empty title}">
-          		<span class="navbar-brand">${title}</span>
-            </c:if>
+	       	</div>
+	       	
             <div class="collapse navbar-collapse" id="navbarNav">
             	<ul class="nav navbar-nav nav-tabs"  id="page-tabs" role="tablist">
                 	<jsp:doBody />
Index: lams_tool_scratchie/web/WEB-INF/tags/Tabs.tag
===================================================================
diff -u -rd432ad1e56c019311c8ca428ba8e08907a56077c -rf6ec928138a1e687ccf2059e8b50f3afce8f3640
--- lams_tool_scratchie/web/WEB-INF/tags/Tabs.tag	(.../Tabs.tag)	(revision d432ad1e56c019311c8ca428ba8e08907a56077c)
+++ lams_tool_scratchie/web/WEB-INF/tags/Tabs.tag	(.../Tabs.tag)	(revision f6ec928138a1e687ccf2059e8b50f3afce8f3640)
@@ -53,16 +53,18 @@
 <div class="card card-default card-monitor-page">
 <div class="card-heading navbar-heading">
 	<nav class="navbar navbar-expand-md bg-primary">
- 		<div class="container-fluid">
-       		<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+ 		<div class="container-fluid" style="flex-wrap: nowrap;">
+       		<span class="navbar-brand"><c:if test="${not empty title}">${title}</c:if></span> <%-- Need span to keep the correct layout for small windows --%>
+       		
+	 		<div class="navbar-translate">
+       		<button class="ml-auto navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
       					<span class="sr-only">Toggle navigation</span>
       					<span class="navbar-toggler-icon"></span>
       					<span class="navbar-toggler-icon"></span>
       					<span class="navbar-toggler-icon"></span>
             		</button>
-			<c:if test="${not empty title}">
-          		<span class="navbar-brand">${title}</span>
-            </c:if>
+	       	</div>
+	       	
             <div class="collapse navbar-collapse" id="navbarNav">
             	<ul class="nav navbar-nav nav-tabs"  id="page-tabs" role="tablist">
                 	<jsp:doBody />
Index: lams_tool_scribe/web/WEB-INF/tags/Tabs.tag
===================================================================
diff -u -rd432ad1e56c019311c8ca428ba8e08907a56077c -rf6ec928138a1e687ccf2059e8b50f3afce8f3640
--- lams_tool_scribe/web/WEB-INF/tags/Tabs.tag	(.../Tabs.tag)	(revision d432ad1e56c019311c8ca428ba8e08907a56077c)
+++ lams_tool_scribe/web/WEB-INF/tags/Tabs.tag	(.../Tabs.tag)	(revision f6ec928138a1e687ccf2059e8b50f3afce8f3640)
@@ -53,16 +53,18 @@
 <div class="card card-default card-monitor-page">
 <div class="card-heading navbar-heading">
 	<nav class="navbar navbar-expand-md bg-primary">
- 		<div class="container-fluid">
-       		<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+ 		<div class="container-fluid" style="flex-wrap: nowrap;">
+       		<span class="navbar-brand"><c:if test="${not empty title}">${title}</c:if></span> <%-- Need span to keep the correct layout for small windows --%>
+       		
+	 		<div class="navbar-translate">
+       		<button class="ml-auto navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
       					<span class="sr-only">Toggle navigation</span>
       					<span class="navbar-toggler-icon"></span>
       					<span class="navbar-toggler-icon"></span>
       					<span class="navbar-toggler-icon"></span>
             		</button>
-			<c:if test="${not empty title}">
-          		<span class="navbar-brand">${title}</span>
-            </c:if>
+	       	</div>
+	       	
             <div class="collapse navbar-collapse" id="navbarNav">
             	<ul class="nav navbar-nav nav-tabs"  id="page-tabs" role="tablist">
                 	<jsp:doBody />
Index: lams_tool_spreadsheet/web/WEB-INF/tags/Tabs.tag
===================================================================
diff -u -rd432ad1e56c019311c8ca428ba8e08907a56077c -rf6ec928138a1e687ccf2059e8b50f3afce8f3640
--- lams_tool_spreadsheet/web/WEB-INF/tags/Tabs.tag	(.../Tabs.tag)	(revision d432ad1e56c019311c8ca428ba8e08907a56077c)
+++ lams_tool_spreadsheet/web/WEB-INF/tags/Tabs.tag	(.../Tabs.tag)	(revision f6ec928138a1e687ccf2059e8b50f3afce8f3640)
@@ -53,16 +53,18 @@
 <div class="card card-default card-monitor-page">
 <div class="card-heading navbar-heading">
 	<nav class="navbar navbar-expand-md bg-primary">
- 		<div class="container-fluid">
-       		<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+ 		<div class="container-fluid" style="flex-wrap: nowrap;">
+       		<span class="navbar-brand"><c:if test="${not empty title}">${title}</c:if></span> <%-- Need span to keep the correct layout for small windows --%>
+       		
+	 		<div class="navbar-translate">
+       		<button class="ml-auto navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
       					<span class="sr-only">Toggle navigation</span>
       					<span class="navbar-toggler-icon"></span>
       					<span class="navbar-toggler-icon"></span>
       					<span class="navbar-toggler-icon"></span>
             		</button>
-			<c:if test="${not empty title}">
-          		<span class="navbar-brand">${title}</span>
-            </c:if>
+	       	</div>
+	       	
             <div class="collapse navbar-collapse" id="navbarNav">
             	<ul class="nav navbar-nav nav-tabs"  id="page-tabs" role="tablist">
                 	<jsp:doBody />
Index: lams_tool_survey/web/WEB-INF/tags/Tabs.tag
===================================================================
diff -u -rd432ad1e56c019311c8ca428ba8e08907a56077c -rf6ec928138a1e687ccf2059e8b50f3afce8f3640
--- lams_tool_survey/web/WEB-INF/tags/Tabs.tag	(.../Tabs.tag)	(revision d432ad1e56c019311c8ca428ba8e08907a56077c)
+++ lams_tool_survey/web/WEB-INF/tags/Tabs.tag	(.../Tabs.tag)	(revision f6ec928138a1e687ccf2059e8b50f3afce8f3640)
@@ -53,16 +53,18 @@
 <div class="card card-default card-monitor-page">
 <div class="card-heading navbar-heading">
 	<nav class="navbar navbar-expand-md bg-primary">
- 		<div class="container-fluid">
-       		<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+ 		<div class="container-fluid" style="flex-wrap: nowrap;">
+       		<span class="navbar-brand"><c:if test="${not empty title}">${title}</c:if></span> <%-- Need span to keep the correct layout for small windows --%>
+       		
+	 		<div class="navbar-translate">
+       		<button class="ml-auto navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
       					<span class="sr-only">Toggle navigation</span>
       					<span class="navbar-toggler-icon"></span>
       					<span class="navbar-toggler-icon"></span>
       					<span class="navbar-toggler-icon"></span>
             		</button>
-			<c:if test="${not empty title}">
-          		<span class="navbar-brand">${title}</span>
-            </c:if>
+	       	</div>
+	       	
             <div class="collapse navbar-collapse" id="navbarNav">
             	<ul class="nav navbar-nav nav-tabs"  id="page-tabs" role="tablist">
                 	<jsp:doBody />
Index: lams_tool_task/web/WEB-INF/tags/Tabs.tag
===================================================================
diff -u -rd432ad1e56c019311c8ca428ba8e08907a56077c -rf6ec928138a1e687ccf2059e8b50f3afce8f3640
--- lams_tool_task/web/WEB-INF/tags/Tabs.tag	(.../Tabs.tag)	(revision d432ad1e56c019311c8ca428ba8e08907a56077c)
+++ lams_tool_task/web/WEB-INF/tags/Tabs.tag	(.../Tabs.tag)	(revision f6ec928138a1e687ccf2059e8b50f3afce8f3640)
@@ -53,16 +53,18 @@
 <div class="card card-default card-monitor-page">
 <div class="card-heading navbar-heading">
 	<nav class="navbar navbar-expand-md bg-primary">
- 		<div class="container-fluid">
-       		<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+ 		<div class="container-fluid" style="flex-wrap: nowrap;">
+       		<span class="navbar-brand"><c:if test="${not empty title}">${title}</c:if></span> <%-- Need span to keep the correct layout for small windows --%>
+       		
+	 		<div class="navbar-translate">
+       		<button class="ml-auto navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
       					<span class="sr-only">Toggle navigation</span>
       					<span class="navbar-toggler-icon"></span>
       					<span class="navbar-toggler-icon"></span>
       					<span class="navbar-toggler-icon"></span>
             		</button>
-			<c:if test="${not empty title}">
-          		<span class="navbar-brand">${title}</span>
-            </c:if>
+	       	</div>
+	       	
             <div class="collapse navbar-collapse" id="navbarNav">
             	<ul class="nav navbar-nav nav-tabs"  id="page-tabs" role="tablist">
                 	<jsp:doBody />
Index: lams_tool_vote/web/WEB-INF/tags/Tabs.tag
===================================================================
diff -u -rd432ad1e56c019311c8ca428ba8e08907a56077c -rf6ec928138a1e687ccf2059e8b50f3afce8f3640
--- lams_tool_vote/web/WEB-INF/tags/Tabs.tag	(.../Tabs.tag)	(revision d432ad1e56c019311c8ca428ba8e08907a56077c)
+++ lams_tool_vote/web/WEB-INF/tags/Tabs.tag	(.../Tabs.tag)	(revision f6ec928138a1e687ccf2059e8b50f3afce8f3640)
@@ -53,16 +53,18 @@
 <div class="card card-default card-monitor-page">
 <div class="card-heading navbar-heading">
 	<nav class="navbar navbar-expand-md bg-primary">
- 		<div class="container-fluid">
-       		<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+ 		<div class="container-fluid" style="flex-wrap: nowrap;">
+       		<span class="navbar-brand"><c:if test="${not empty title}">${title}</c:if></span> <%-- Need span to keep the correct layout for small windows --%>
+       		
+	 		<div class="navbar-translate">
+       		<button class="ml-auto navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
       					<span class="sr-only">Toggle navigation</span>
       					<span class="navbar-toggler-icon"></span>
       					<span class="navbar-toggler-icon"></span>
       					<span class="navbar-toggler-icon"></span>
             		</button>
-			<c:if test="${not empty title}">
-          		<span class="navbar-brand">${title}</span>
-            </c:if>
+	       	</div>
+	       	
             <div class="collapse navbar-collapse" id="navbarNav">
             	<ul class="nav navbar-nav nav-tabs"  id="page-tabs" role="tablist">
                 	<jsp:doBody />
Index: lams_tool_wiki/web/WEB-INF/tags/Tabs.tag
===================================================================
diff -u -rd432ad1e56c019311c8ca428ba8e08907a56077c -rf6ec928138a1e687ccf2059e8b50f3afce8f3640
--- lams_tool_wiki/web/WEB-INF/tags/Tabs.tag	(.../Tabs.tag)	(revision d432ad1e56c019311c8ca428ba8e08907a56077c)
+++ lams_tool_wiki/web/WEB-INF/tags/Tabs.tag	(.../Tabs.tag)	(revision f6ec928138a1e687ccf2059e8b50f3afce8f3640)
@@ -53,16 +53,18 @@
 <div class="card card-default card-monitor-page">
 <div class="card-heading navbar-heading">
 	<nav class="navbar navbar-expand-md bg-primary">
- 		<div class="container-fluid">
-       		<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+ 		<div class="container-fluid" style="flex-wrap: nowrap;">
+       		<span class="navbar-brand"><c:if test="${not empty title}">${title}</c:if></span> <%-- Need span to keep the correct layout for small windows --%>
+       		
+	 		<div class="navbar-translate">
+       		<button class="ml-auto navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
       					<span class="sr-only">Toggle navigation</span>
       					<span class="navbar-toggler-icon"></span>
       					<span class="navbar-toggler-icon"></span>
       					<span class="navbar-toggler-icon"></span>
             		</button>
-			<c:if test="${not empty title}">
-          		<span class="navbar-brand">${title}</span>
-            </c:if>
+	       	</div>
+	       	
             <div class="collapse navbar-collapse" id="navbarNav">
             	<ul class="nav navbar-nav nav-tabs"  id="page-tabs" role="tablist">
                 	<jsp:doBody />
Index: lams_tool_zoom/web/WEB-INF/tags/Tabs.tag
===================================================================
diff -u -rd432ad1e56c019311c8ca428ba8e08907a56077c -rf6ec928138a1e687ccf2059e8b50f3afce8f3640
--- lams_tool_zoom/web/WEB-INF/tags/Tabs.tag	(.../Tabs.tag)	(revision d432ad1e56c019311c8ca428ba8e08907a56077c)
+++ lams_tool_zoom/web/WEB-INF/tags/Tabs.tag	(.../Tabs.tag)	(revision f6ec928138a1e687ccf2059e8b50f3afce8f3640)
@@ -53,16 +53,18 @@
 <div class="card card-default card-monitor-page">
 <div class="card-heading navbar-heading">
 	<nav class="navbar navbar-expand-md bg-primary">
- 		<div class="container-fluid">
-       		<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+ 		<div class="container-fluid" style="flex-wrap: nowrap;">
+       		<span class="navbar-brand"><c:if test="${not empty title}">${title}</c:if></span> <%-- Need span to keep the correct layout for small windows --%>
+       		
+	 		<div class="navbar-translate">
+       		<button class="ml-auto navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
       					<span class="sr-only">Toggle navigation</span>
       					<span class="navbar-toggler-icon"></span>
       					<span class="navbar-toggler-icon"></span>
       					<span class="navbar-toggler-icon"></span>
             		</button>
-			<c:if test="${not empty title}">
-          		<span class="navbar-brand">${title}</span>
-            </c:if>
+	       	</div>
+	       	
             <div class="collapse navbar-collapse" id="navbarNav">
             	<ul class="nav navbar-nav nav-tabs"  id="page-tabs" role="tablist">
                 	<jsp:doBody />
Index: lams_www/web/WEB-INF/tags/Tabs.tag
===================================================================
diff -u -rd432ad1e56c019311c8ca428ba8e08907a56077c -rf6ec928138a1e687ccf2059e8b50f3afce8f3640
--- lams_www/web/WEB-INF/tags/Tabs.tag	(.../Tabs.tag)	(revision d432ad1e56c019311c8ca428ba8e08907a56077c)
+++ lams_www/web/WEB-INF/tags/Tabs.tag	(.../Tabs.tag)	(revision f6ec928138a1e687ccf2059e8b50f3afce8f3640)
@@ -53,16 +53,18 @@
 <div class="card card-default card-monitor-page">
 <div class="card-heading navbar-heading">
 	<nav class="navbar navbar-expand-md bg-primary">
- 		<div class="container-fluid">
-       		<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+ 		<div class="container-fluid" style="flex-wrap: nowrap;">
+       		<span class="navbar-brand"><c:if test="${not empty title}">${title}</c:if></span> <%-- Need span to keep the correct layout for small windows --%>
+       		
+	 		<div class="navbar-translate">
+       		<button class="ml-auto navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
       					<span class="sr-only">Toggle navigation</span>
       					<span class="navbar-toggler-icon"></span>
       					<span class="navbar-toggler-icon"></span>
       					<span class="navbar-toggler-icon"></span>
             		</button>
-			<c:if test="${not empty title}">
-          		<span class="navbar-brand">${title}</span>
-            </c:if>
+	       	</div>
+	       	
             <div class="collapse navbar-collapse" id="navbarNav">
             	<ul class="nav navbar-nav nav-tabs"  id="page-tabs" role="tablist">
                 	<jsp:doBody />