fix: sticky nav

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

@@ -1,23 +1,26 @@
-.main-nav {
-  width: 100%;
-  background: $secondary-color url('EXT:my_sitepackage/Resources/Public/Images/linen-texture.png') repeat;
-  position: relative;
-  z-index: 1000;
+// Define a fixed height for the navigation and apply that as padding-top on the body
+// so that when it becomes sticky, the content doesn't jump.
+$nav-height: 60px; // Adjust as needed
 
-  &.sticky {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
-  }
+header {
+  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;
+  z-index: 1000;
+}
+
+.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%;