/home/u336066629/websites/AmAL87tCa/public_html/wp-content/themes/shf/header.php
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<?php wp_head(); ?>
<link rel="icon" type="image/png" sizes="16x16" href="<?php echo get_theme_file_uri('assets/icons/icon.png'); ?>">
<link rel="preload" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"></noscript>
<script defer src="https://cdn.tailwindcss.com"></script>
<script defer src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<link rel="stylesheet" href="https://sunnyhillfoundation.org/wp-content/themes/shf/style.css">
</style>
</head>
<body <?php body_class(); ?>>
<?php wp_body_open(); ?>
<header class="w-full absolute text-center z-[60] text-[14px] leading-[15px] font-mono top-8">
<div class="lg:hidden absolute right-4 top-2 z-[70]">
<button id="menuToggle" class="text-[#000]" aria-label="Toggle Menu">
<svg id="menuIcon" class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
</svg>
<svg id="closeIcon" class="w-6 h-6 hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
</svg>
</button>
</div>
<nav class="hidden lg:flex py-[10px] px-32 justify-evenly items-center container mx-auto">
<div class="flex-none">
<a href="<?php echo get_home_url(); ?>" class="no-underline transition-colors duration-300 <?php echo (is_front_page() || is_home()) ? 'text-white' : 'text-[#BCBCBC] hover:text-[#EB212E]'; ?>">
HOME
</a>
</div>
<div class="flex-1 flex justify-center">
<ul class="flex gap-10 list-none p-0">
<li>
<a href="<?php echo get_permalink(get_page_by_path('about-us')); ?>" class="no-underline transition-colors duration-300 <?php echo is_page('about-us') ? 'text-black' : 'text-[#BCBCBC] hover:text-[#EB212E]'; ?>">
ABOUT US
</a>
</li>
<li>
<a href="<?php echo get_permalink(get_page_by_path('board')); ?>" class="no-underline transition-colors duration-300 <?php echo is_page('board') ? 'text-white' : 'text-[#BCBCBC] hover:text-[#EB212E]'; ?>">
BOARD
</a>
</li>
<li>
<a href="<?php echo get_permalink(get_page_by_path('projects')); ?>" class="no-underline transition-colors duration-300 <?php echo is_page('projects') ? 'text-white' : 'text-[#BCBCBC] hover:text-[#EB212E]'; ?>">
PROJECTS
</a>
</li>
<li>
<a href="<?php echo get_permalink(get_page_by_path('testimonials')); ?>" class="text-[#BCBCBC] hover:text-[#EB212E] transition-colors duration-300 no-underline">
TESTIMONIALS
</a>
</li>
<!-- <li>
<a href="<?php echo get_permalink(get_page_by_path('media')); ?>" class="no-underline transition-colors duration-300 <?php echo is_page('media') ? 'text-white' : 'text-[#BCBCBC] hover:text-[#EB212E]'; ?>">
MEDIA COVERAGE
</a>
</li> -->
<!-- <li>
<a href="#" class="text-[#BCBCBC] hover:text-[#EB212E] transition-colors duration-300 no-underline">
COVERAGE
</a>
</li> -->
</ul>
</div>
<div class="flex-none">
<ul class="flex gap-5 list-none p-0">
<li>
<a href="https://sunnyhillfestival.com" target='_blank' class="text-[#BCBCBC] hover:text-[#EB212E] transition-colors duration-300 no-underline">
SHFESTIVAL
</a>
</li>
<li>
<a href="<?php echo get_permalink(get_page_by_path('contact')); ?>" class="no-underline text-[#BCBCBC] hover:text-[#EB212E] transition-colors duration-300 block">
CONTACT
</a>
</li>
<li>
<a href="https://www.facebook.com/sunnyhillfoundation/" target='_blank' class="text-[#BCBCBC] hover:text-[#EB212E] transition-colors duration-300 no-underline">
FB
</a>
</li>
<li>
<a href="https://www.instagram.com/sunnyhillfoundation/" target='_blank' class="text-[#BCBCBC] hover:text-[#EB212E] transition-colors duration-300 no-underline">
IG
</a>
</li>
</ul>
</div>
</nav>
<div id="mobileMenu" class="hidden lg:hidden font-supply w-full h-[100vh] bg-[#858585] fixed top-0 left-0">
<div class="h-full flex flex-col justify-center">
<ul class="list-none space-y-8 text-[16px]">
<a href="<?php echo get_home_url(); ?>" class="no-underline transition-colors duration-300 <?php echo (is_front_page() || is_home()) ? 'text-white' : 'text-[#BCBCBC] hover:text-[#EB212E]'; ?>">
HOME
</a>
<li>
<a href="<?php echo get_permalink(get_page_by_path('about-us')); ?>" class="no-underline text-[#BCBCBC] hover:text-[#EB212E] transition-colors duration-300 block">
ABOUT US
</a>
</li>
<li>
<a href="<?php echo get_permalink(get_page_by_path('board')); ?>" class="no-underline text-[#BCBCBC] hover:text-[#EB212E] transition-colors duration-300 block">
BOARD
</a>
</li>
<li>
<a href="<?php echo get_permalink(get_page_by_path('projects')); ?>" class="no-underline text-[#BCBCBC] hover:text-[#EB212E] transition-colors duration-300 block">
PROJECTS
</a>
</li>
<li>
<a href="<?php echo get_permalink(get_page_by_path('testimonials')); ?>" class="text-[#BCBCBC] hover:text-[#EB212E] transition-colors duration-300 no-underline block">
TESTIMONIALS
</a>
</li>
<!-- <li>
<a href="<?php echo get_permalink(get_page_by_path('media')); ?>" class="no-underline text-[#BCBCBC] hover:text-[#EB212E] transition-colors duration-300 block">
MEDIA COVERAGE
</a>
</li> -->
<!-- <li>
<a href="#" class="text-[#BCBCBC] hover:text-[#EB212E] transition-colors duration-300 no-underline block">
COVERAGE
</a>
</li> -->
<li>
<a href="https://sunnyhillfestival.com" target='_blank' class="text-[#BCBCBC] hover:text-[#EB212E] transition-colors duration-300 no-underline block">
SHFESTIVAL
</a>
</li>
<li>
<a href="<?php echo get_permalink(get_page_by_path('contact')); ?>" class="no-underline text-[#BCBCBC] hover:text-[#EB212E] transition-colors duration-300 block">
CONTACT
</a>
</li>
<li class="flex gap-4 justify-center">
<a href="https://www.facebook.com/sunnyhillfoundation/" target='_blank' class="text-[#BCBCBC] hover:text-[#EB212E] transition-colors duration-300 no-underline">
FB
</a>
<a href="https://www.instagram.com/sunnyhillfoundation/" target='_blank' class="text-[#BCBCBC] hover:text-[#EB212E] transition-colors duration-300 no-underline">
IG
</a>
</li>
</ul>
</div>
</div>
</header>
<script>
document.addEventListener('DOMContentLoaded', () => {
const menuToggle = document.getElementById('menuToggle');
const menu = document.getElementById('mobileMenu');
const menuIcon = document.getElementById('menuIcon');
const closeIcon = document.getElementById('closeIcon');
if (menuToggle && menu && menuIcon && closeIcon) {
menuToggle.addEventListener('click', () => {
menu.classList.toggle('hidden');
menuIcon.classList.toggle('hidden');
closeIcon.classList.toggle('hidden');
document.body.classList.toggle('mobile-menu-open');
});
}
});
</script>