From c36972b2c0d5d7396ecb74613668374152c3bf97 Mon Sep 17 00:00:00 2001
From: Bas Brands <bas@moodle.com>
Date: Mon, 31 May 2021 13:03:19 +0200
Subject: [PATCH] MDL-71293 theme_boost: improve navbar for new navigation

---
 lib/outputrenderers.php                      |  7 +-
 lib/templates/action_menu.mustache           |  2 +-
 lib/templates/action_menu_trigger.mustache   |  2 +-
 lib/templates/custom_menu_item.mustache      |  2 +-
 lib/templates/search_input_navbar.mustache   |  2 +-
 message/templates/message_popover.mustache   |  2 +-
 theme/boost/scss/moodle.scss                 |  2 +-
 theme/boost/scss/moodle/bootswatch.scss      |  7 --
 theme/boost/scss/moodle/navbar.scss          | 45 ++++++++++++
 theme/boost/scss/moodle/popover-region.scss  |  2 +-
 theme/boost/scss/moodle/search.scss          | 38 ++++------
 theme/boost/scss/moodle/variables.scss       |  7 +-
 theme/boost/style/moodle.css                 | 74 +++++++++++++-------
 theme/boost/templates/navbar-secure.mustache | 33 +++++----
 theme/boost/templates/navbar.mustache        | 66 ++++++++---------
 theme/classic/style/moodle.css               | 74 +++++++++++++-------
 theme/classic/templates/navbar.mustache      | 51 +++++---------
 17 files changed, 238 insertions(+), 178 deletions(-)
 delete mode 100644 theme/boost/scss/moodle/bootswatch.scss
 create mode 100644 theme/boost/scss/moodle/navbar.scss

diff --git a/lib/outputrenderers.php b/lib/outputrenderers.php
index da13f380d69..b20215da4fe 100644
--- a/lib/outputrenderers.php
+++ b/lib/outputrenderers.php
@@ -3330,7 +3330,7 @@ EOD;
             return html_writer::div(
                 html_writer::span(
                     $returnstr,
-                    'login'
+                    'login nav-link'
                 ),
                 $usermenuclasses
             );
@@ -3347,7 +3347,7 @@ EOD;
             return html_writer::div(
                 html_writer::span(
                     $returnstr,
-                    'login'
+                    'login nav-link'
                 ),
                 $usermenuclasses
             );
@@ -3419,7 +3419,8 @@ EOD;
 
         $am = new action_menu();
         $am->set_menu_trigger(
-            $returnstr
+            $returnstr,
+            'nav-link'
         );
         $am->set_action_label(get_string('usermenu'));
         $am->set_alignment(action_menu::TR, action_menu::BR);
diff --git a/lib/templates/action_menu.mustache b/lib/templates/action_menu.mustache
index ab38ebab653..4beafc85376 100644
--- a/lib/templates/action_menu.mustache
+++ b/lib/templates/action_menu.mustache
@@ -30,7 +30,7 @@
         }
     }
 }}
-<div class="action-menu {{classes}} d-inline"{{#attributes}} {{name}}="{{value}}"{{/attributes}}>
+<div class="action-menu {{classes}}"{{#attributes}} {{name}}="{{value}}"{{/attributes}}>
     {{#primary}}
 
         <div class="{{classes}} d-flex "{{#attributes}} {{name}}="{{value}}"{{/attributes}}>
diff --git a/lib/templates/action_menu_trigger.mustache b/lib/templates/action_menu_trigger.mustache
index 9c009fcdb1d..93f483fcde7 100644
--- a/lib/templates/action_menu_trigger.mustache
+++ b/lib/templates/action_menu_trigger.mustache
@@ -78,7 +78,7 @@
     }
 }}
 <div class="dropdown{{^secondary.items}} hidden{{/secondary.items}}">
-    <a href="#" tabindex="0" class="d-inline-block {{triggerextraclasses}} dropdown-toggle icon-no-margin" id="action-menu-toggle-{{instance}}" aria-label="{{title}}" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" aria-controls="action-menu-{{instance}}-menu">
+    <a href="#" tabindex="0" class="{{triggerextraclasses}} dropdown-toggle icon-no-margin" id="action-menu-toggle-{{instance}}" aria-label="{{title}}" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" aria-controls="action-menu-{{instance}}-menu">
         {{{actiontext}}}
         {{{menutrigger}}}
             {{#icon}}
diff --git a/lib/templates/custom_menu_item.mustache b/lib/templates/custom_menu_item.mustache
index 544d081669f..5bff2f9757d 100644
--- a/lib/templates/custom_menu_item.mustache
+++ b/lib/templates/custom_menu_item.mustache
@@ -50,7 +50,7 @@
 {{/haschildren}}
 {{^haschildren}}
 <li class="nav-item">
-    <a class="nav-item nav-link" href="{{{url}}}" {{#title}}title="{{{title}}}"{{/title}}>{{{text}}}</a>
+    <a class="nav-link" href="{{{url}}}" {{#title}}title="{{{title}}}"{{/title}}>{{{text}}}</a>
 </li>
 {{/haschildren}}
 {{/divider}}
diff --git a/lib/templates/search_input_navbar.mustache b/lib/templates/search_input_navbar.mustache
index 73953d8c9b1..d2eab577bf2 100644
--- a/lib/templates/search_input_navbar.mustache
+++ b/lib/templates/search_input_navbar.mustache
@@ -70,7 +70,7 @@
         </form>
     </div>
     <a
-        class="btn btn-open"
+        class="btn btn-open nav-link"
         data-toggle="collapse"
         data-action="opensearch"
         href="#searchform-navbar"
diff --git a/message/templates/message_popover.mustache b/message/templates/message_popover.mustache
index 73c7a85f3df..8d913663e93 100644
--- a/message/templates/message_popover.mustache
+++ b/message/templates/message_popover.mustache
@@ -36,7 +36,7 @@
 
 }}
 <div class="popover-region collapsed" data-region="popover-region-messages">
-    <a id="message-drawer-toggle-{{uniqid}}" class="nav-link d-inline-block popover-region-toggle position-relative icon-no-margin" href="#"
+    <a id="message-drawer-toggle-{{uniqid}}" class="nav-link popover-region-toggle position-relative icon-no-margin" href="#"
             role="button">
         {{#pix}} t/message, core, {{#str}} togglemessagemenu, message {{/str}} {{/pix}}
         <div class="count-container {{^unreadcount}}hidden{{/unreadcount}}" data-region="count-container"
diff --git a/theme/boost/scss/moodle.scss b/theme/boost/scss/moodle.scss
index 2d70cb2e07a..5066ae560bd 100644
--- a/theme/boost/scss/moodle.scss
+++ b/theme/boost/scss/moodle.scss
@@ -11,7 +11,6 @@ $breadcrumb-divider-rtl: "◀" !default;
 @import "moodle/icons";
 @import "moodle/admin";
 @import "moodle/blocks";
-@import "moodle/bootswatch";
 @import "moodle/calendar";
 @import "moodle/contentbank";
 @import "moodle/course";
@@ -43,3 +42,4 @@ $breadcrumb-divider-rtl: "◀" !default;
 @import "moodle/prefixes";
 @import "moodle/atto";
 @import "moodle/toasts";
+@import "moodle/navbar";
diff --git a/theme/boost/scss/moodle/bootswatch.scss b/theme/boost/scss/moodle/bootswatch.scss
deleted file mode 100644
index e6b2377b63d..00000000000
--- a/theme/boost/scss/moodle/bootswatch.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-// Adjustments to make bootstrap 4 work better with some variables from bootstrap 3 bootswatches
-
-$navbar-height: 50px !default;
-
-.navbar {
-    max-height: $navbar-height;
-}
diff --git a/theme/boost/scss/moodle/navbar.scss b/theme/boost/scss/moodle/navbar.scss
new file mode 100644
index 00000000000..2d134fa42f6
--- /dev/null
+++ b/theme/boost/scss/moodle/navbar.scss
@@ -0,0 +1,45 @@
+.navbar.fixed-top {
+    padding-top: 0;
+    padding-bottom: 0;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
+    align-items: stretch;
+    height: $navbar-height;
+
+    .navbar-brand {
+        .logo {
+            max-height: calc(#{$navbar-height} - (#{$primary-nav-padding-y} * 2));
+        }
+    }
+    .nav-link {
+        height: 100%;
+        display: flex;
+        align-items: center;
+        white-space: nowrap;
+    }
+    .divider {
+        width: 1px;
+        background-color: $gray-300;
+    }
+
+    #usernavigation .nav-link {
+        padding: 0 $primary-nav-padding-x;
+    }
+    .usermenu {
+        display: flex;
+        .action-menu {
+            display: flex;
+            align-items: center;
+        }
+        .dropdown-toggle::after {
+            display: none;
+        }
+    }
+    .moodle-actionmenu .menubar,
+    .action-menu-trigger .dropdown {
+        height: 100%;
+        display: flex;
+    }
+}
+#page {
+    margin-top: $navbar-height;
+}
diff --git a/theme/boost/scss/moodle/popover-region.scss b/theme/boost/scss/moodle/popover-region.scss
index cd4b72674bb..355a379657b 100644
--- a/theme/boost/scss/moodle/popover-region.scss
+++ b/theme/boost/scss/moodle/popover-region.scss
@@ -199,7 +199,7 @@ $content-header-footer-height: $region-header-height + $region-footer-height;
     }
 
     .popover-region-container {
-        top: $line-height-base * 1.4 * $font-size-base;
+        top: calc(#{$navbar-height} - (#{$spacer} / 2));
     }
 
 }
diff --git a/theme/boost/scss/moodle/search.scss b/theme/boost/scss/moodle/search.scss
index 0512d270e4b..2896cee931e 100644
--- a/theme/boost/scss/moodle/search.scss
+++ b/theme/boost/scss/moodle/search.scss
@@ -51,30 +51,20 @@
     }
 }
 
-@include media-breakpoint-down(md) {
-    .simplesearchform .collapse.show,
-    .simplesearchform .collapsing {
-        position: absolute;
-        left: 0;
-        top: 0;
-        width: 100%;
-        display: flex;
-        background-color: $white;
-        z-index: $zindex-popover;
-        height: $navbar-height;
-        .form-inline {
-            width: auto;
-            margin-left: auto;
-            margin-right: auto;
-        }
-    }
-}
-.navbar.navbar-light {
-    .simplesearchform .btn-open {
-        color: $navbar-light-color;
-        &:hover {
-            color: $navbar-light-hover-color;
-        }
+.simplesearchform .collapse.show,
+.simplesearchform .collapsing {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    display: flex;
+    background-color: $white;
+    z-index: $zindex-popover;
+    height: $navbar-height;
+    .form-inline {
+        width: auto;
+        margin-left: auto;
+        margin-right: auto;
     }
 }
 
diff --git a/theme/boost/scss/moodle/variables.scss b/theme/boost/scss/moodle/variables.scss
index 9b733cf2f4c..a630018bff2 100644
--- a/theme/boost/scss/moodle/variables.scss
+++ b/theme/boost/scss/moodle/variables.scss
@@ -17,4 +17,9 @@ $state-warning-bg: theme-color-level("warning", -10) !default;
 $state-warning-border: theme-color-level("warning", -10) !default;
 
 $state-danger-bg: theme-color-level("danger", -10) !default;
-$state-danger-border: theme-color-level("danger", -9) !default;
\ No newline at end of file
+$state-danger-border: theme-color-level("danger", -9) !default;
+
+$primary-nav-padding-y: ($spacer / 4) !default;
+$primary-nav-padding-x: ($spacer / 2) !default;
+
+$navbar-height: 50px !default;
diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css
index 4cd39038e7c..8a437c846e2 100644
--- a/theme/boost/style/moodle.css
+++ b/theme/boost/style/moodle.css
@@ -12818,9 +12818,6 @@ input[disabled] {
   .pagelayout-embedded .embedded-blocks {
     width: 100%; } }
 
-.navbar {
-  max-height: 50px; }
-
 /* calendar.less */
 .calendar_event_category {
   background-color: #e0cbe0; }
@@ -16348,27 +16345,21 @@ body.path-question-type .mform fieldset.hidden {
   transition: none;
   width: inherit; }
 
-@media (max-width: 991.98px) {
-  .simplesearchform .collapse.show,
-  .simplesearchform .collapsing {
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 100%;
-    display: flex;
-    background-color: #fff;
-    z-index: 1060;
-    height: 50px; }
-    .simplesearchform .collapse.show .form-inline,
-    .simplesearchform .collapsing .form-inline {
-      width: auto;
-      margin-left: auto;
-      margin-right: auto; } }
-
-.navbar.navbar-light .simplesearchform .btn-open {
-  color: rgba(0, 0, 0, 0.6); }
-  .navbar.navbar-light .simplesearchform .btn-open:hover {
-    color: rgba(0, 0, 0, 0.9); }
+.simplesearchform .collapse.show,
+.simplesearchform .collapsing {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  display: flex;
+  background-color: #fff;
+  z-index: 1060;
+  height: 50px; }
+  .simplesearchform .collapse.show .form-inline,
+  .simplesearchform .collapsing .form-inline {
+    width: auto;
+    margin-left: auto;
+    margin-right: auto; }
 
 .search-areas-actions {
   margin-bottom: 1rem; }
@@ -19007,7 +18998,7 @@ body {
   right: 0; }
 
 .navbar .popover-region-container {
-  top: 1.96875rem; }
+  top: calc(50px - (1rem / 2)); }
 
 .content-item-container {
   width: 100%;
@@ -19753,6 +19744,39 @@ div.editor_atto_toolbar button .icon {
   .toast .close {
     color: inherit; }
 
+.navbar.fixed-top {
+  padding-top: 0;
+  padding-bottom: 0;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
+  align-items: stretch;
+  height: 50px; }
+  .navbar.fixed-top .navbar-brand .logo {
+    max-height: calc(50px - (0.25rem * 2)); }
+  .navbar.fixed-top .nav-link {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    white-space: nowrap; }
+  .navbar.fixed-top .divider {
+    width: 1px;
+    background-color: #dee2e6; }
+  .navbar.fixed-top #usernavigation .nav-link {
+    padding: 0 0.5rem; }
+  .navbar.fixed-top .usermenu {
+    display: flex; }
+    .navbar.fixed-top .usermenu .action-menu {
+      display: flex;
+      align-items: center; }
+    .navbar.fixed-top .usermenu .dropdown-toggle::after {
+      display: none; }
+  .navbar.fixed-top .moodle-actionmenu .menubar,
+  .navbar.fixed-top .action-menu-trigger .dropdown {
+    height: 100%;
+    display: flex; }
+
+#page {
+  margin-top: 50px; }
+
 body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale; }
diff --git a/theme/boost/templates/navbar-secure.mustache b/theme/boost/templates/navbar-secure.mustache
index d4e9643431c..407791d688e 100644
--- a/theme/boost/templates/navbar-secure.mustache
+++ b/theme/boost/templates/navbar-secure.mustache
@@ -28,24 +28,23 @@
         "sitename": "Moodle Site"
     }
 }}
-<nav class="fixed-top navbar navbar-light bg-white navbar-expand moodle-has-zindex" aria-label="{{#str}}navigation{{/str}}">
-
+<nav class="navbar fixed-top navbar-light bg-white navbar-expand" aria-label="{{#str}}sitemenubar, admin{{/str}}">
+    <div class="navbar-brand d-flex align-items-center m-1 p-0 aabtn">
         {{# output.should_display_navbar_logo }}
-            <span class="logo d-none d-sm-inline">
-                <img src="{{output.get_compact_logo_url}}" alt="{{sitename}}">
-            </span>
+            <img src="{{output.get_compact_logo_url}}" class="logo mr-1" alt="{{sitename}}">
         {{/ output.should_display_navbar_logo }}
-        <span class="site-name d-none d-md-inline">{{{ sitename }}}</span>
+        {{{ sitename }}}
+    </div>
 
-        {{# output.secure_layout_language_menu }}
-        <ul class="navbar-nav d-none d-md-flex">
-            <!-- language_menu -->
-            {{{ . }}}
-        </ul>
-        {{/ output.secure_layout_language_menu }}
-        {{# output.secure_layout_login_info }}
-        <div class="ml-auto">
-            {{{ . }}}
-        </div>
-        {{/ output.secure_layout_login_info }}
+    {{# output.secure_layout_language_menu }}
+    <ul class="nav navbar-nav language-menu my-1">
+        {{{ . }}}
+    </ul>
+    {{/ output.secure_layout_language_menu }}
+
+    {{# output.secure_layout_login_info }}
+    <div class="ml-auto nav-link">
+        {{{ . }}}
+    </div>
+    {{/ output.secure_layout_login_info }}
 </nav>
diff --git a/theme/boost/templates/navbar.mustache b/theme/boost/templates/navbar.mustache
index e38b64a140d..993d899b7a9 100644
--- a/theme/boost/templates/navbar.mustache
+++ b/theme/boost/templates/navbar.mustache
@@ -37,43 +37,35 @@
         "sitename": "Moodle Site"
     }
 }}
-<nav class="fixed-top navbar navbar-light bg-white navbar-expand moodle-has-zindex" aria-label="{{#str}}sitemenubar, admin{{/str}}">
+<nav class="navbar fixed-top navbar-light bg-white navbar-expand" aria-label="{{#str}}sitemenubar, admin{{/str}}">
 
-        <div data-region="drawer-toggle" class="d-inline-block mr-3">
-            <button aria-expanded="{{#navdraweropen}}true{{/navdraweropen}}{{^navdraweropen}}false{{/navdraweropen}}" aria-controls="nav-drawer" type="button" class="btn nav-link float-sm-left mr-1 btn-light bg-gray" data-action="toggle-drawer" data-side="left" data-preference="drawer-open-nav">{{#pix}}i/menubars{{/pix}}<span class="sr-only">{{#str}}sidepanel, core{{/str}}</span></button>
+    <div class="d-flex" data-region="drawer-toggle">
+        <button class="navbar-toggler aabtn d-block my-1 mr-2" aria-expanded="{{#navdraweropen}}true{{/navdraweropen}}{{^navdraweropen}}false{{/navdraweropen}}" aria-controls="nav-drawer" type="button" data-action="toggle-drawer" data-side="left" data-preference="drawer-open-nav">
+            <span class="navbar-toggler-icon"></span>
+            <span class="sr-only">{{#str}}sidepanel, core{{/str}}</span>
+        </button>
+    </div>
+
+    <a href="{{{ config.wwwroot }}}" class="navbar-brand d-flex align-items-center m-1 p-0 aabtn">
+        {{# output.should_display_navbar_logo }}
+            <img src="{{output.get_compact_logo_url}}" class="logo mr-1" alt="{{sitename}}">
+        {{/ output.should_display_navbar_logo }}
+        {{{ sitename }}}
+    </a>
+
+    <ul class="navbar-nav d-none d-md-flex my-1 px-1">
+        <!-- custom_menu -->
+        {{{ output.custom_menu }}}
+        <!-- page_heading_menu -->
+        {{{ output.page_heading_menu }}}
+    </ul>
+
+    <div id="usernavigation" class="navbar-nav my-1 ml-auto">
+        <div class="divider border-left h-50 align-self-center mx-1"></div>
+        {{{ output.search_box }}}
+        {{{ output.navbar_plugin_output }}}
+        <div class="d-flex align-items-stretch usermenu-container" data-region="usermenu">
+            {{{ output.user_menu }}}
         </div>
-
-        <a href="{{{ config.wwwroot }}}" class="navbar-brand aabtn {{# output.should_display_navbar_logo }}has-logo{{/ output.should_display_navbar_logo }}
-            {{^ output.should_display_navbar_logo }}
-                d-none d-sm-inline
-            {{/ output.should_display_navbar_logo }}
-                ">
-            {{# output.should_display_navbar_logo }}
-                <span class="logo d-none d-sm-inline">
-                    <img src="{{output.get_compact_logo_url}}" alt="{{sitename}}">
-                </span>
-            {{/ output.should_display_navbar_logo }}
-            <span class="site-name d-none d-md-inline">{{{ sitename }}}</span>
-        </a>
-
-        <ul class="navbar-nav d-none d-md-flex">
-            <!-- custom_menu -->
-            {{{ output.custom_menu }}}
-            <!-- page_heading_menu -->
-            {{{ output.page_heading_menu }}}
-        </ul>
-        <div class="ml-auto">
-            {{{ output.search_box }}}
-        </div>
-        <ul class="nav navbar-nav usernav">
-            <!-- navbar_plugin_output -->
-            <li class="nav-item">
-                {{{ output.navbar_plugin_output }}}
-            </li>
-            <!-- user_menu -->
-            <li class="nav-item align-items-center pl-2">
-                {{{ output.user_menu }}}
-            </li>
-        </ul>
-        <!-- search_box -->
+    </div>
 </nav>
diff --git a/theme/classic/style/moodle.css b/theme/classic/style/moodle.css
index d444630f39d..cf6bebc552a 100644
--- a/theme/classic/style/moodle.css
+++ b/theme/classic/style/moodle.css
@@ -13040,9 +13040,6 @@ input[disabled] {
   .pagelayout-embedded .embedded-blocks {
     width: 100%; } }
 
-.navbar {
-  max-height: 50px; }
-
 /* calendar.less */
 .calendar_event_category {
   background-color: #e0cbe0; }
@@ -16581,27 +16578,21 @@ body.path-question-type .mform fieldset.hidden {
   transition: none;
   width: inherit; }
 
-@media (max-width: 991.98px) {
-  .simplesearchform .collapse.show,
-  .simplesearchform .collapsing {
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 100%;
-    display: flex;
-    background-color: #fff;
-    z-index: 1060;
-    height: 50px; }
-    .simplesearchform .collapse.show .form-inline,
-    .simplesearchform .collapsing .form-inline {
-      width: auto;
-      margin-left: auto;
-      margin-right: auto; } }
-
-.navbar.navbar-light .simplesearchform .btn-open {
-  color: rgba(0, 0, 0, 0.6); }
-  .navbar.navbar-light .simplesearchform .btn-open:hover {
-    color: rgba(0, 0, 0, 0.9); }
+.simplesearchform .collapse.show,
+.simplesearchform .collapsing {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  display: flex;
+  background-color: #fff;
+  z-index: 1060;
+  height: 50px; }
+  .simplesearchform .collapse.show .form-inline,
+  .simplesearchform .collapsing .form-inline {
+    width: auto;
+    margin-left: auto;
+    margin-right: auto; }
 
 .search-areas-actions {
   margin-bottom: 1rem; }
@@ -19196,7 +19187,7 @@ body {
   right: 0; }
 
 .navbar .popover-region-container {
-  top: 1.96875rem; }
+  top: calc(50px - (1rem / 2)); }
 
 .content-item-container {
   width: 100%;
@@ -19944,6 +19935,39 @@ div.editor_atto_toolbar button .icon {
   .toast .close {
     color: inherit; }
 
+.navbar.fixed-top {
+  padding-top: 0;
+  padding-bottom: 0;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
+  align-items: stretch;
+  height: 50px; }
+  .navbar.fixed-top .navbar-brand .logo {
+    max-height: calc(50px - (0.25rem * 2)); }
+  .navbar.fixed-top .nav-link {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    white-space: nowrap; }
+  .navbar.fixed-top .divider {
+    width: 1px;
+    background-color: #dee2e6; }
+  .navbar.fixed-top #usernavigation .nav-link {
+    padding: 0 0.5rem; }
+  .navbar.fixed-top .usermenu {
+    display: flex; }
+    .navbar.fixed-top .usermenu .action-menu {
+      display: flex;
+      align-items: center; }
+    .navbar.fixed-top .usermenu .dropdown-toggle::after {
+      display: none; }
+  .navbar.fixed-top .moodle-actionmenu .menubar,
+  .navbar.fixed-top .action-menu-trigger .dropdown {
+    height: 100%;
+    display: flex; }
+
+#page {
+  margin-top: 50px; }
+
 body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale; }
diff --git a/theme/classic/templates/navbar.mustache b/theme/classic/templates/navbar.mustache
index d2bbf79c9a2..7b4f5e16c3d 100644
--- a/theme/classic/templates/navbar.mustache
+++ b/theme/classic/templates/navbar.mustache
@@ -38,38 +38,25 @@
 }}
 <nav class="fixed-top navbar navbar-bootswatch navbar-expand moodle-has-zindex">
 
-        <a href="{{{ config.wwwroot }}}" class="navbar-brand aalink {{# output.should_display_navbar_logo }}has-logo{{/ output.should_display_navbar_logo }}
-            {{^ output.should_display_navbar_logo }}
-                d-none d-sm-inline
-            {{/ output.should_display_navbar_logo }}
-                ">
-            {{# output.should_display_navbar_logo }}
-                <span class="logo d-none d-sm-inline">
-                    <img src="{{output.get_compact_logo_url}}" alt="{{sitename}}">
-                </span>
-            {{/ output.should_display_navbar_logo }}
-            <span class="site-name d-none d-md-inline">{{{ sitename }}}</span>
-        </a>
+    <a href="{{{ config.wwwroot }}}" class="navbar-brand d-flex align-items-center m-1 p-0 aabtn">
+        {{# output.should_display_navbar_logo }}
+            <img src="{{output.get_compact_logo_url}}" class="logo mr-1" alt="{{sitename}}">
+        {{/ output.should_display_navbar_logo }}
+        {{{ sitename }}}
+    </a>
 
-        <ul class="navbar-nav d-none d-md-flex">
-            <!-- custom_menu -->
-            {{{ output.custom_menu }}}
-            <!-- page_heading_menu -->
-            {{{ output.page_heading_menu }}}
-        </ul>
-        <div class="ml-auto">
-            {{{ output.search_box }}}
+    <ul class="navbar-nav d-none d-md-flex">
+        <!-- custom_menu -->
+        {{{ output.custom_menu }}}
+        <!-- page_heading_menu -->
+        {{{ output.page_heading_menu }}}
+    </ul>
+    <div id="usernavigation" class="navbar-nav my-1 ml-auto">
+        <div class="divider border-left h-50 align-self-center mx-1"></div>
+        {{{ output.search_box }}}
+        {{{ output.navbar_plugin_output }}}
+        <div class="d-flex align-items-stretch usermenu-container" data-region="usermenu">
+            {{{ output.user_menu }}}
         </div>
-        <ul class="nav navbar-nav usernav">
-            <!-- navbar_plugin_output -->
-            <li class="nav-item">
-                {{{ output.navbar_plugin_output }}}
-            </li>
-            <!-- user_menu -->
-            <li class="nav-item align-items-center">
-                {{{ output.user_menu }}}
-            </li>
-        </ul>
-        <!-- search_box -->
+    </div>
 </nav>
-