From 8e2de36c047293bac5e81aff7b17ce5d34556172 Mon Sep 17 00:00:00 2001
From: Graham Dixon <graham@gdixon.co.uk>
Date: Mon, 7 Jun 2021 17:37:21 +0100
Subject: [PATCH] Fixes position of sticky-nav after closing ql-banner

---
 app/assets/v2/js/ql-banner.js     | 4 +++-
 app/assets/v2/scss/ql-banner.scss | 6 +++++-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/app/assets/v2/js/ql-banner.js b/app/assets/v2/js/ql-banner.js
index 7acc8999989..02af5719939 100644
--- a/app/assets/v2/js/ql-banner.js
+++ b/app/assets/v2/js/ql-banner.js
@@ -1,6 +1,8 @@
 
 // check if the banner has been closed
 if (!localStorage.getItem('ql-banner')) {
+  // get body
+  const body = document.querySelector('body');
   // grab the elements
   const banner = document.getElementById('ql-banner');
   // grab the elements
@@ -11,7 +13,7 @@ if (!localStorage.getItem('ql-banner')) {
   const bannerInnerRow = document.querySelector('#ql-banner-inner .row');
 
   // show the banner
-  banner.style.display = 'flex';
+  body.classList.add('ql-banner-visible');
 
   // set up the kinetics (using custom implementation to contain the particles in a single el)
   const kinetics = new Kinetics({
diff --git a/app/assets/v2/scss/ql-banner.scss b/app/assets/v2/scss/ql-banner.scss
index e4135f738f1..4d4999c5475 100644
--- a/app/assets/v2/scss/ql-banner.scss
+++ b/app/assets/v2/scss/ql-banner.scss
@@ -7,6 +7,10 @@
   z-index: 4;
 }
 
+body.ql-banner-visible #ql-banner {
+  display: flex;
+}
+
 #ql-banner-inner {
   height: 160px;
 }
@@ -79,7 +83,7 @@
   z-index: 0;
 }
 
-body:not(.navbar-menu-open) .sticky-nav {
+body.ql-banner-visible:not(.navbar-menu-open) .sticky-nav {
   top: 160px;
 }