diff --git a/addons/point_of_sale/static/src/app/navbar/navbar.xml b/addons/point_of_sale/static/src/app/navbar/navbar.xml
index fcd41be5818..fbe178c0792 100644
--- a/addons/point_of_sale/static/src/app/navbar/navbar.xml
+++ b/addons/point_of_sale/static/src/app/navbar/navbar.xml
@@ -3,7 +3,7 @@
 
     <t t-name="point_of_sale.Navbar" owl="1">
         <div class="pos-topheader d-flex w-100 p-0 m-0 bg-white border-bottom">
-            <div t-if="pos.tempScreen" class="block-top-header" />
+            <div t-if="pos.tempScreen" class="block-top-header position-absolute top-0 start-0 bg-black opacity-50 w-100 h-inherit z-1000" />
             <div t-if="!ui.isSmall" class="pos-branding d-flex justify-content-start flex-grow-1 h-100 p-0 my-0 text-start">
                 <img class="pos-logo h-75 ms-3 me-auto align-self-center" t-on-click="() => debug.toggleWidget()" src="/web/static/img/logo.png" alt="Logo" />
             </div>
diff --git a/addons/point_of_sale/static/src/scss/pos.scss b/addons/point_of_sale/static/src/scss/pos.scss
index 279c762d5ef..a102d3ac717 100644
--- a/addons/point_of_sale/static/src/scss/pos.scss
+++ b/addons/point_of_sale/static/src/scss/pos.scss
@@ -52,6 +52,14 @@ button {
     }
 }
 
+.z-1000 {
+    z-index: 1000;
+}
+
+.h-inherit {
+    height: inherit;
+}
+
 /*  ********* The Webkit Scrollbar  ********* */
 
 .pos *::-webkit-scrollbar{