Merge pull request #549 from Quetzacoalt91/fix-nav-height

Update calculation of nav bar position
PrestaShopCorp · Mar 1, 2024 · ecb9714 · ecb9714
2 parents 6d0c47b + 0745aa5
commit ecb9714
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 8 deletions.
diff --git a/_dev/src/app.vue b/_dev/src/app.vue
@@ -53,9 +53,6 @@ import GettersTypesOnboarding from '@/store/modules/onboarding/getters-types';
 import GettersTypesApp from '@/store/modules/app/getters-types';
 
 let resizeEventTimer;
-const root = document.documentElement;
-const header = document.querySelector('#content .page-head');
-const headerFull = document.querySelector('#header_infos');
 
 export default defineComponent({
   components: {
@@ -91,8 +88,15 @@ export default defineComponent({
       }, 250);
     },
     setCustomProperties() {
-      root.style.setProperty('--header-height', `${header.clientHeight}px`);
-      root.style.setProperty('--header-height-full', `${header.clientHeight + headerFull.clientHeight}px`);
+      const root = document.documentElement;
+      const header = document.querySelector('#content .page-head');
+
+      if (!header) {
+        return;
+      }
+
+      root.style.setProperty('--header-height', `${header.clientHeight + 20}px`);
+      root.style.setProperty('--header-height-full', `${header.offsetTop + header.clientHeight}px`);
     },
     async getFbContext() {
       await this.$store.dispatch('onboarding/WARMUP_STORE');

diff --git a/_dev/src/assets/scss/base/_nobootstrap.scss b/_dev/src/assets/scss/base/_nobootstrap.scss
@@ -7,8 +7,7 @@
 
 .nobootstrap {
   background-color: unset !important;
-  padding: 100px 0 100px; // fallback for IE11
-  padding: var(--header-height) 0 100px;
+  padding: 0;
   min-width: unset !important;
 
   form p {

diff --git a/_dev/src/assets/scss/layouts/_sticky-head.scss b/_dev/src/assets/scss/layouts/_sticky-head.scss
@@ -3,7 +3,7 @@
   position: sticky;
   top: 136px; // fallback for IE11
   top: var(--header-height-full);
-  margin-bottom: 20px;
+  margin-bottom: var(--header-height);
   z-index: 200;
   padding-left: 0;
   padding-right: 0;