diff --git a/theme/bootstrapbase/less/moodle/message.less b/theme/bootstrapbase/less/moodle/message.less
index 5597bebcda8..3a51eb4974a 100644
--- a/theme/bootstrapbase/less/moodle/message.less
+++ b/theme/bootstrapbase/less/moodle/message.less
@@ -1182,8 +1182,6 @@
 
 .message-drawer {
     position: fixed;
-    top: 0;
-    height: 100%;
     right: 0;
     width: @message-drawer-width;
     z-index: 999;
@@ -1191,13 +1189,28 @@
     box-shadow: -2px 2px 4px rgba(0, 0, 0, .08);
     display: flex;
     flex-direction: column;
-
+    height: ~"calc(100% - 42px)";
+    top: 52px;
+    .drawer-top {
+        transition: all .2s ease-in-out;
+        height: 0;
+        opacity: 0;
+    }
+    @media (max-width: 980px) {
+        &.affix {
+            top: 0;
+            height: 100%;
+            .drawer-top {
+                height: 37px;
+                opacity: 1;
+            }
+        }
+    }
     @media (min-width: 980px) {
+        top: 42px;
         .drawer-top {
             display: none;
         }
-        height: ~"calc(100% - 42px)";
-        top: 42px;
     }
 
     .transition(all .2s ease-in-out);
diff --git a/theme/bootstrapbase/style/moodle.css b/theme/bootstrapbase/style/moodle.css
index e6525419944..6913412c8dc 100644
--- a/theme/bootstrapbase/style/moodle.css
+++ b/theme/bootstrapbase/style/moodle.css
@@ -9107,8 +9107,6 @@ a.ygtvspacer:hover {
 }
 .message-drawer {
   position: fixed;
-  top: 0;
-  height: 100%;
   right: 0;
   width: 320px;
   z-index: 999;
@@ -9116,14 +9114,30 @@ a.ygtvspacer:hover {
   box-shadow: -2px 2px 4px rgba(0, 0, 0, 0.08);
   display: flex;
   flex-direction: column;
+  height: calc(100% - 42px);
+  top: 52px;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
 }
+.message-drawer .drawer-top {
+  transition: all 0.2s ease-in-out;
+  height: 0;
+  opacity: 0;
+}
+@media (max-width: 980px) {
+  .message-drawer.affix {
+    top: 0;
+    height: 100%;
+  }
+  .message-drawer.affix .drawer-top {
+    height: 37px;
+    opacity: 1;
+  }
+}
 @media (min-width: 980px) {
   .message-drawer {
-    height: calc(100% - 42px);
     top: 42px;
   }
   .message-drawer .drawer-top {
diff --git a/theme/bootstrapbase/templates/core_message/message_drawer.mustache b/theme/bootstrapbase/templates/core_message/message_drawer.mustache
index 0bcf71179e4..b600ee605e8 100644
--- a/theme/bootstrapbase/templates/core_message/message_drawer.mustache
+++ b/theme/bootstrapbase/templates/core_message/message_drawer.mustache
@@ -45,10 +45,12 @@
     data-region="message-drawer"
     role="region"
 >
-    <div class="drawer-top p-2 border-bottom bg-secondary text-right">
-        <a id="message-drawer-close-{{uniqid}}" class="" href="#" role="button">
-            {{#pix}} i/window_close, core, {{#str}} togglemessagemenu, message {{/str}} {{/pix}}
-        </a>
+    <div class="drawer-top border-bottom bg-secondary text-right">
+        <div class="p-2">
+            <a id="message-drawer-close-{{uniqid}}" href="#">
+                {{#pix}} i/window_close, core, {{#str}} togglemessagemenu, message {{/str}} {{/pix}}
+            </a>
+        </div>
     </div>
     <div class="header-container position-relative" data-region="header-container">
         {{> core_message/message_drawer_view_contacts_header }}
@@ -76,16 +78,23 @@ require(
 [
     'jquery',
     'core_message/message_drawer',
-    'core_message/message_popover'
+    'core_message/message_popover',
+    'theme_bootstrapbase/bootstrap'
 ],
 function(
     $,
     MessageDrawer,
-    Popover
+    Popover,
+    _
 ) {
 
     var root = $('#message-drawer-{{uniqid}}');
     MessageDrawer.init(root);
+    root.affix({
+        offset: {
+            top: 52
+        }
+    });
 
     var toggle = $('#message-drawer-close-{{uniqid}}');
     Popover.init(toggle);