fix mobile nav menu
parent
eb9a22d914
commit
4a31f84a68
|
@ -20,7 +20,5 @@
|
|||
|
||||
</div>
|
||||
|
||||
{# include mobile nav #}
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -19,7 +19,7 @@
|
|||
|
||||
|
||||
<div class="md:hidden flex items-center">
|
||||
<button class="outline-none mobile-menu-button">
|
||||
<button id="mobile-menu-button" class="outline-none">
|
||||
<svg class="w-6 h-6 text-gray-500" x-show="!showMenu" fill="none" stroke-linecap="round"
|
||||
stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path d="M4 6h16M4 12h16M4 18h16"></path>
|
||||
|
@ -28,14 +28,28 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="md:hidden mobile-menu">
|
||||
<div id="mobile-menu" class="hidden">
|
||||
<ul>
|
||||
<li class="active"><a href="index.html"
|
||||
class="block text-sm px-2 py-4 text-white bg-primary font-semibold ">Home</a></li>
|
||||
<li><a href="#services" class="block text-sm px-2 py-4 hover:bg-primary transition duration-300">Services</a>
|
||||
<li class="active"><a href="/about"
|
||||
class="block text-sm px-2 py-4 hover:bg-primary font-semibold ">About</a></li>
|
||||
<li><a href="/about" class="block text-sm px-2 py-4 hover:bg-primary transition duration-300">History</a>
|
||||
</li>
|
||||
<li><a href="#about" class="block text-sm px-2 py-4 hover:bg-primary transition duration-300">About</a></li>
|
||||
<li><a href="#contact" class="block text-sm px-2 py-4 hover:bg-primary transition duration-300">Contact Us</a>
|
||||
<li><a href="/alumni" class="block text-sm px-2 py-4 hover:bg-primary transition duration-300">Alumni</a>
|
||||
</li>
|
||||
<li><a href="/alumni" class="block text-sm px-2 py-4 bg-primary transition duration-300">Create Account</a>
|
||||
</li>
|
||||
<li><a href="/alumni" class="block text-sm px-2 py-4 bg-gray-400 transition duration-300">Login</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
<script>
|
||||
let hamburger = document.getElementById('mobile-menu-button');
|
||||
|
||||
let mobileMenu = document.getElementById('mobile-menu');
|
||||
|
||||
hamburger.addEventListener('click', function(){
|
||||
mobileMenu.classList.toggle('hidden');
|
||||
});
|
||||
</script>
|
||||
|
|
Loading…
Reference in New Issue