fix: sticky nav

packages/base/Resources/Public/JavaScript/navigation.js

@@ -1,8 +1,6 @@
 document.addEventListener('DOMContentLoaded', function () {
     const nav = document.getElementById('mainNav');
     const toggle = document.getElementById('navToggle');
-    const navLinks = document.getElementById('navLinks');
-    let lastScrollTop = 0;
 
     // Toggle menu on mobile
     toggle.addEventListener('click', function () {
@@ -10,19 +8,9 @@ document.addEventListener('DOMContentLoaded', function () {
         toggle.classList.toggle('active');
     });
 
-    // Sticky on scroll
+    // No need to add or remove sticky class here since CSS handles position: sticky
-    window.addEventListener('scroll', function () {
+    // We simply rely on the CSS-based sticky behavior and reserved space via body padding.
-        const currentScroll = window.pageYOffset || document.documentElement.scrollTop;
-        if (currentScroll > 0) {
-            nav.classList.add('sticky');
-        } else {
-            nav.classList.remove('sticky');
-        }
-        lastScrollTop = currentScroll <= 0 ? 0 : currentScroll;
-    });
     
-    // Optionally handle dropdowns on mobile (if desired)
-    // For example:
     const submenuParents = document.querySelectorAll('.nav-item.has-submenu');
     submenuParents.forEach(parent => {
         parent.addEventListener('click', (e) => {
@@ -31,7 +19,6 @@ document.addEventListener('DOMContentLoaded', function () {
                 const subMenu = parent.querySelector('.sub-menu');
                 if (subMenu) {
                     const isOpen = subMenu.style.display === 'block';
-                    // Close all open submenus first (optional)
                     document.querySelectorAll('.sub-menu').forEach(sm => sm.style.display = 'none');
                     subMenu.style.display = isOpen ? 'none' : 'block';
                 }

packages/base/Resources/Public/Scss/components/_navigation.scss

@@ -1,23 +1,26 @@
-.main-nav {
+// Define a fixed height for the navigation and apply that as padding-top on the body
-  width: 100%;
+// so that when it becomes sticky, the content doesn't jump.
-  background: $secondary-color url('EXT:my_sitepackage/Resources/Public/Images/linen-texture.png') repeat;
+$nav-height: 60px; // Adjust as needed
-  position: relative;
-  z-index: 1000;
 
-  &.sticky {
+header {
-    position: fixed;
+  width: 100%;
+  height: $nav-height;
+  line-height: $nav-height;
+  background: $secondary-color url('EXT:my_sitepackage/Resources/Public/Images/linen-texture.png') repeat;
+  position: sticky;
   top: 0;
-    left: 0;
+  z-index: 1000;
-    right: 0;
-    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
 }
 
+.main-nav {
+
   .container {
     display: flex;
     align-items: center;
     justify-content: space-between;
     margin: 0 auto;
-    padding: 1rem;
+    height: 100%;
+    padding: 0 1rem;
   }
 
   .nav-logo {
@@ -82,6 +85,7 @@
   .nav-links {
     display: flex;
     list-style: none;
+    align-items: center;
 
     .nav-item {
       margin: 0 1rem;
@@ -102,13 +106,11 @@
     }
   }
 
-  // Responsive: show hamburger and collapse menu on smaller screens
   @media (max-width: $breakpoint-lg) {
     .nav-toggle {
       display: block;
     }
 
-    // Hide links by default on mobile and show only when toggled
     .nav-links {
       position: absolute;
       top: 100%;