Head MAster

<header class="site-header">

    <div class="header-container">

        <div class="menu-and-nav-container">

            <div class="menu-toggle">

                <div class="hamburger-line top"></div>

                <div class="hamburger-line middle"></div>

                <div class="hamburger-line bottom"></div>

            </div>

            <nav class="main-nav">

                <ul>

                    <li><a href="/shop">Shop</a></li>

                    <li><a href="/doggyography">Doggyography</a></li>

                    <li><a href="/training">Training</a></li>

                    <li><a href="/contact">Contact</a></li>

                </ul>

            </nav>

        </div>

        <a href="/" class="logo">

            <img src="https://raverdogs.com/wp-content/uploads/2025/06/Artboard-1-4.svg" alt="Raver Dogs Logo">

        </a>

    </div>

</header>

<style>

/* =================================================================

   RAVER DOGS - MASTER HEADER V2 (FINAL) - STYLESHEET

   ================================================================= */

body { color: #FFFFFF; font-family: "brandon-grotesque", sans-serif; font-size: 18px; font-weight: 700; line-height: 1.6; }

body.nav-is-open { overflow: hidden; }

a { color: #FFFFFF; text-decoration: none; }

.site-header { position: fixed; top: 0; left: 0; width: 100%; z-index: 9999; padding: 25px 0; transition: background-color 0.3s ease; }

.header-container { width: 95%; max-width: 1400px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; }

.logo img { height: 55px; width: auto; transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); }

.logo:hover img { animation: pulse 1s infinite; }

@keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.08); } 100% { transform: scale(1); } }

.menu-toggle { cursor: pointer; width: 35px; height: 28px; display: flex; flex-direction: column; justify-content: space-between; position: relative; z-index: 10000; }

.hamburger-line { width: 100%; height: 4px; background-color: #FF03E6; border-radius: 4px; transition: transform 0.3s ease-in-out, opacity 0.3s ease; transform-origin: center; }

.nav-is-open .hamburger-line.top { transform: translateY(12px) rotate(45deg); }

.nav-is-open .hamburger-line.middle { opacity: 0; transform: scaleX(0); }

.nav-is-open .hamburger-line.bottom { transform: translateY(-12px) rotate(-45deg); }

.main-nav { display: block; position: fixed; top: 0; left: 0; width: 320px; height: 100vh; padding: 120px 40px; background-color: rgba(25, 0, 23, 0.85); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: 0; visibility: hidden; transform: translateX(-100%); transition: opacity 0.4s ease, visibility 0.4s ease, transform 0.4s ease; }

.nav-is-open .main-nav { opacity: 1; visibility: visible; transform: translateX(0); }

.main-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: flex-start; }

.main-nav li { width: 100%; margin-bottom: 15px; }

.main-nav a { display: block; font-size: 24px; padding: 10px 15px; border-radius: 5px; color: #39FF14; transition: background-color 0.3s ease, color 0.3s ease; }

.main-nav a:hover { background-color: rgba(255, 3, 230, 0.2); color: #FFFFFF; }

.main-nav .current-menu-item a { color: #FF03E6; text-decoration: line-through; text-decoration-thickness: 2px; pointer-events: none; }

/* --- FIX for Elementor Invisible Overlap --- */

.elementor-section-wrap {

    z-index: auto;

}

</style>

<script>

/* ======================================================

   RAVER DOGS - MASTER HEADER V2 (FINAL) - SCRIPT

   ====================================================== */

document.addEventListener('DOMContentLoaded', function() {

    const menuToggle = document.querySelector('.menu-toggle');

    if (menuToggle) {

        menuToggle.addEventListener('click', function() {

            document.body.classList.toggle('nav-is-open');

        });

    }

});

</script>