c

.htac_nav.php

@@ -0,0 +1,107 @@
+
+<style>
+    .page-header {
+        user-select: none;
+        -moz-user-select: none;
+        -webkit-user-select: none;
+        background: #052433;
+        position: fixed;
+        top: 0;
+        /* height: 40px; */
+        color: #fff;
+        width: 100%;
+        line-height: 40px;
+        z-index: 1000; /* Ensure the header is above other content */
+        margin-bottom: 500px;
+    }
+
+    .page-header__top {
+        display: flex;
+        justify-content: space-between;
+        padding: 0 16px;
+    }  
+
+    .page-header__toggle {
+        font-size: 2em;
+        cursor: pointer;
+    }
+
+    .navigation {
+        opacity: 0;
+        height: 0;
+        overflow: hidden;
+        transition: opacity 0.7s, height 0.7s;
+        list-style: none;
+        padding: 0;
+        margin: 0;
+    }
+
+    .navigation__item {
+        background: #052433;
+        padding: 0 16px;
+        text-align: left;
+    }
+
+    .navigation--visible { 
+        opacity: 1;
+        height: auto;
+    }
+    .page-header__logo{
+        margin-top: 10px;
+    }
+    @media (min-width: 550px) { 
+        .page-header {
+            display: flex;
+            align-items: center;
+        }
+        
+        .page-header__top {
+            margin-right: auto;
+        }
+        
+        .page-header__top, .page-header__bottom {
+            display: block;
+        }
+        
+        .page-header__toggle {
+            display: none;
+        }
+        
+        .navigation {
+            display: flex;
+            opacity: 1;
+            height: auto;
+        }
+        
+        .navigation__item {
+            opacity: 0.8;    
+            display: inline-block;
+            padding: 0 16px;
+        }
+        
+        .navigation__item:hover {
+            cursor: pointer;
+            opacity: 1;
+        }
+    }
+</style>
+
+<header class="page-header">
+  <div class="page-header__top">
+    <a href="/" class=""><img class="page-header__logo" src="/assets/svg/dwdlogo.svg" alt=""></a>
+    <div class="page-header__toggle" onclick="toggleMenu()">☰</div>
+  </div>
+  <nav class="page-header__bottom">
+    <ul id="navigation" class="navigation">
+      <li class="navigation__item"><a href="/"> Home </a></li>
+      <li class="navigation__item"><a href="/about-us"> About </a></li>
+      <li class="navigation__item"><a href="/contact-us"> Contact </a></li>
+    </ul>
+  </nav>
+</header>
+<script>
+    let nav = document.getElementById('navigation');
+    function toggleMenu() {
+        nav.classList.toggle('navigation--visible');
+    }
+</script>