#

app/scripts.js

@@ -0,0 +1,32 @@
+const header = document.querySelector('header');
+
+
+
+document.addEventListener("DOMContentLoaded", function () {
+    let header = document.querySelector('header');
+    if (header) {
+        let body = document.querySelector("body");
+
+        window.addEventListener("scroll", function () {
+            let scroll = window.scrollY;
+
+            if (window.innerWidth > 768) {
+                if (scroll >= 60) {
+                    header.classList.add("header-position-fixed");
+                } else {
+                    header.classList.remove("header-position-fixed");
+                }
+            }
+
+            if (scroll >= 60) {
+                header.style.top = '0px';
+            } else {
+                if (body.classList.contains("landing-page")) {
+                    header.style.top = '0px';
+                } else {
+                    header.style.top = `${hellobarHeight + 0}px`;
+                }
+            }
+        });
+    }
+});

app/styles-new.css

@@ -62,6 +62,7 @@ header {
 }
 }
 
+/*
 @media screen and (min-width: 1441px) {
     .home-cover {
         width: 100%;
@@ -72,10 +73,8 @@ header {
         margin-left: auto;
         margin-right: auto;
     }
-    .sub-brands h2 {
-        text-align: center;
-    }
 }
+    */
 
 .sub-brands {
     margin-top: 80px;

index.php

@@ -84,14 +84,15 @@ function showNextSpan() {
                 and creative industries.</p>
         </section>
         <section class="container sub-brands">
-            <h2 class="heading-1">Family of Brands</h2>
+            <h2 class="heading-1 align-center">Family of Brands</h2>
             <hr>
             <?php include './includes/family-of-brands.php'; ?>
             <hr>
         </section>
     </main>
 
     <script src="https://polykit.xyz/app/js/polykit-v0-3.js"></script>
+    <script src="app/scripts.js"></script>
 
 </body>