I am working on a react project using vite and for css I am using tailwind css. From the component section of tailwind css website I have copied template, and I am unable to get responsive functionality and show/hide menu on click
below is my header code
<nav class="bg-gray-800">
<div class="mx-auto max-w-7xl px-2 sm:px-6 lg:px-8">
<div class="relative flex h-16 items-center justify-between">
<div class="absolute inset-y-0 left-0 flex items-center sm:hidden">
<button type="button" class="inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-gray-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white" aria-controls="mobile-menu" aria-expanded="false">
<span class="sr-only">Open main menu</span>
<svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
</svg>
<svg class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
<div class="flex flex-1 items-center justify-center sm:items-stretch sm:justify-start">
<div class="flex flex-shrink-0 items-center">
<img class="block h-8 w-auto lg:hidden" src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=500" alt="Your Company" />
<img class="hidden h-8 w-auto lg:block" src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=500" alt="Your Company"/>
</div>
<div class="hidden sm:ml-6 sm:block">
<div class="flex space-x-4">
Dashboard
Team
Projects
Calendar
</div>
</div>
</div>
<div class="absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0">
<button type="button" class="rounded-full bg-gray-800 p-1 text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800">
<span class="sr-only">View notifications</span>
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0" />
</svg>
</button>
<div class="relative ml-3">
<div>
<button type="button" class="flex rounded-full bg-gray-800 text-sm focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800" id="user-menu-button" aria-expanded="false" aria-haspopup="true">
<span class="sr-only">Open user menu</span>
<img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""/>
</button>
</div>
<div class="absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="user-menu-button" tabindex="-1">
Your Profile
Settings
Sign out
</div>
</div>
</div>
</div>
</div>
<div class="sm:hidden" id="mobile-menu">
<div class="space-y-1 px-2 pt-2 pb-3">
Dashboard
Team
Projects
Calendar
</div>
</div>
</nav>
everything is working fine but by running the above code I am getting only ui and not getting click function on menu bars or other
see the image below
[
let menuMovilButton = document.getElementById('menu-movil-button');
let userMenuButton = document.getElementById('user-menu-button');
let userMenu = document.getElementById('user-menu');
let menuMovil = document.getElementById('menu-movil');
menuMovilButton.addEventListener('click', () =>{
menuMovil.classList.toggle('hidden');
});
userMenuButton.addEventListener('click', () =>{
userMenu.classList.toggle('hidden');
});`
can anyone fix that for me really I spend a lot of time trying different solutions never works.
I use a tailwindcss template for the modal and javascript to show it or hide it.
I don't find the solution can anyone fix it, My modal just works fine for the first row of the table and did not work for the rest of rows
<!-- component -->
<div class="overflow-x-auto">
<div class="min-w-screen min-h-screen flex items-start justify-center font-sans overflow-hidden">
<div class="w-full lg:w-5/6">
<div class="bg-white shadow-md rounded my-6">
<table class="min-w-max w-full table-auto">
<thead>
<tr class="bg-gray-200 text-gray-600 uppercase text-sm leading-normal">
<th class="py-3 px-6 text-left">Event Title</th>
<th class="py-3 px-6 text-left">Description</th>
<th class="py-3 px-6 text-center">Date</th>
<th class="py-3 px-6 text-center">Image</th>
<th class="py-3 px-6 text-center">Status</th>
<th class="py-3 px-6 text-center">Actions</th>
</tr>
</thead>
<tbody class="text-gray-600 text-sm font-light">
#foreach ($events as $event)
<tr class="border-b border-gray-200 hover:bg-gray-100">
<td class="py-3 px-6 text-left whitespace-nowrap">
<div class="flex items-center">
<span class="font-medium">{{ $event->title }}</span>
</div>
</td>
<td class="py-3 px-6 text-left">
<div class="flex items-center">
<span>{{ $event->description }}</span>
</div>
</td>
<td class="py-3 px-6 text-center">
<div class="flex items-center justify-center">
<span class="font-medium">{{ $event->date }}</span>
</div>
</td>
<td class="py-3 px-6 text-center">
<div class="flex items-center justify-center">
<img class="w-6 h-6 rounded-full border-gray-200 border -m-1 transform hover:scale-125" src="{{ Storage::url($event->image) }}" alt="{{ $event->place }}"/>
</div>
</td>
<td class="py-3 px-6 text-center">
#if(($event->status)==1)
<span class="bg-purple-200 text-purple-600 py-1 px-3 rounded-full text-xs">Active</span>
#else
<span class="bg-red-200 text-red-600 py-1 px-3 rounded-full text-xs">Pending</span>
#endif
<!--<span class="bg-green-200 text-green-600 py-1 px-3 rounded-full text-xs">Completed</span>-->
</td>
<td class="py-3 px-6 text-center">
<div class="flex item-center justify-center">
<div class="w-4 mr-4 transform hover:text-red-700 hover:scale-110">
<a href="{{ route('events.edit',$event->id) }}">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
</svg>
</a>
</div>
<!--------My delete buttton------------------>
<div class="w-4 mr-2 transform hover:text-red-700 hover:scale-110">
<a class="delete-btn" >
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
</svg>
</a>
</div>
</div>
</td>
</tr>
#endforeach
</tbody>
</table>
{!! $events->links() !!}
</div>
</div>
</div>
</div>
<!-- delet event confiming model-->
<div class="relative z-10 hidden" aria-labelledby="modal-title" role="dialog" aria-modal="true" id="overlay">
<div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" ></div>
<div class="fixed inset-0 z-10 overflow-y-auto">
<div class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
<div class="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg">
<div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
<div class="sm:flex sm:items-start">
<div class="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
<!-- Heroicon name: outline/exclamation-triangle -->
<svg class="h-6 w-6 text-red-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 10.5v3.75m-9.303 3.376C1.83 19.126 2.914 21 4.645 21h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 4.88c-.866-1.501-3.032-1.501-3.898 0L2.697 17.626zM12 17.25h.007v.008H12v-.008z" />
</svg>
</div>
<form action="{{ route('events.destroy',$event->id) }}" method="POST">
#csrf
#method('DELETE')
<div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
<h3 class="text-lg font-medium leading-6 text-gray-900" id="modal-title">Delete an Event</h3>
<div class="mt-2">
<p class="text-sm text-gray-500">Are you sure you want to delete the event? All of the event data will be permanently removed. This action cannot be undone.</p>
</div>
</div>
</div>
</div>
<div class="bg-gray-50 px-4 py-3 sm:flex sm:flex-row-reverse sm:px-6">
<button type="submit" class="inline-flex w-full justify-center rounded-md border border-transparent bg-red-600 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 sm:ml-3 sm:w-auto sm:text-sm">Delete</button>
<button type="button" class="mt-3 inline-flex w-full justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-base font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm" id="close-modal">Cancel</button>
</form>
</div>
</div>
</div>
</div>
</div>
<!-- delet event confiming model script-->
<script>
window.addEventListener('DOMContentLoaded', () =>{
const overlay = document.querySelector('#overlay')
const delBtn = document.querySelector('.delete-btn')
const closeBtn = document.querySelector('#close-modal')
const toggleModal = () => {
overlay.classList.toggle('hidden')
overlay.classList.toggle('flex')
}
delBtn.addEventListener('click', toggleModal)
closeBtn.addEventListener('click', toggleModal)
})
</script>
Taken directly from the MDN documentation:
The Document method querySelector() returns the first Element within
the document that matches the specified selector, or group of
selectors. If no matches are found, null is returned.
So regardless of the number of elements you have in your document with a class of delete-btn, using document.querySelector('.delete-btn') will only ever return the first element it finds.
As you want to be able to apply an event listener to all elements with the delete-btn class, what you really want is the querySelectorAll() method.
The Document method querySelectorAll() returns a static (not live)
NodeList representing a list of the document's elements that match the
specified group of selectors.
The NodeList returned from calling document.querySelectorAll('.delete-btn'); is a collection (similar concept to an array) which contains all the elements located with the specified selector. As this is a collection and not a single element, you need to iterate over each of the collection elements and attach an eventListener to each iteration.
So applying the above to your use case, you might do:
window.addEventListener('DOMContentLoaded', function() {
document.querySelectorAll('.delete-btn').forEach((btn) => {
btn.addEventListener('click', function(evt) {
toggleModal();
})
})
});
An example CodePend for reference.
I have created a responsive navbar for a website using tailwind CSS. It is basically a CSS menu. With a desktop browser, when hovering over the Company menu item, the sub menu items are displayed in a drop down menu. This does not work on a tablet because there is no hover event. I was thinking about adding this feature using javascript. How to I go about adding a click/tap event to the Company menu item for touch devices so that the Company menu is displayed by a tap on a tablet device? The codepen demo of the current navbar is here.
const toggleNav = document.querySelector(".nav-list");
const toggleBtn = document.querySelector(".btn-toggle");
const overlay = document.querySelector(".overlay");
const body = document.querySelector("body");
toggleBtn.addEventListener("click", () => {
toggleNav.classList.toggle("active-nav");
body.classList.toggle("no-scroll");
overlay.classList.toggle("active");
toggleBtn.classList.toggle("active-toggle");
});
overlay.addEventListener("click", () => {
toggleNav.classList.remove("active-nav");
body.classList.remove("no-scroll");
overlay.classList.remove("active");
toggleBtn.classList.remove("active-toggle");
});
// [Dropdown]
const dropdownTrigger = document.querySelector(".has-dropdown");
const dropdownMenu = document.querySelector(".sub-menu");
dropdownTrigger.addEventListener("click", (event) => {
event.preventDefault();
dropdownTrigger.querySelector("svg").classList.toggle("active");
dropdownMenu.classList.toggle("active-sub");
});
<body>
<!-- [Backgoround layer] -->
<span class="overlay"></span>
<!-- [Navbar] -->
<nav class="relative z-50 bg-dark">
<div class="mx-auto flex h-20 w-full max-w-[92%] items-center justify-between py-4 sm:h-28 sm:py-6">
<div class="">
<a href="#" class="flex items-center gap-3 font-primary text-3xl font-medium sm:text-5xl lg:text-[55px]">
To the Moon
</a>
</div>
<div class="nav-list lg:mt-5">
<ul class="!xl:justify-end relative flex flex-col space-y-2 md:flex-row md:items-center md:justify-center md:space-y-0 md:py-0">
<li class="px-4 py-2 md:py-4 lg:px-8">
<a href="#" class="relative font-primary text-base text-light transition-all duration-200 md:text-xl">
Home
<span class="inline-block; absolute -bottom-1 left-0 right-0 h-1 w-full bg-primary sm:h-1"></span>
</a>
</li>
<li class="px-4 py-2 md:py-4 lg:px-8">
Services
</li>
<li class="group relative px-4 py-2 transition-all duration-300 md:py-4 md:hover:bg-primary md:hover:bg-opacity-60 lg:px-8">
<a href="#" class="has-dropdown flex items-center gap-3 font-primary text-base leading-6 text-light transition-all duration-200 md:text-xl">
Company
<svg class="sub-caret h-2.5 w-2.5 transform fill-current transition-all duration-200 sm:h-4 sm:w-4 md:group-hover:rotate-180" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="enable-background: new 0 0 386.257 386.257" viewBox="0 0 386.257 386.257">
<path d="m0 96.879 193.129 192.5 193.128-192.5z" />
</svg>
</a>
<ul class="sub-menu pl-3 md:pl-0">
<li class="px-4 pb-2 pt-4 md:py-3 lg:px-8">
<a href="#" class="border-b-transparent font-primary text-base text-light transition-all duration-200 hover:border-b-light md:border-b-2 md:text-xl">
<span class="md:hidden">-</span>
Portfolio
</a>
</li>
<li class="px-4 pt-2 md:py-3 lg:px-8">
<a href="#" class="border-b-transparent font-primary text-base text-light transition-all duration-200 hover:border-b-light md:border-b-2 md:text-xl">
<span class="md:hidden">-</span>
About
</a>
</li>
</ul>
</li>
<li class="px-4 pb-6 pt-2 pr-0 md:py-4 lg:pl-8">
Contact
</li>
</ul>
</div>
<button class="btn-toggle md:hidden">
<svg class="icon-bars h-6 w-6 fill-current" viewBox="0 0 55 50" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule: evenodd; clip-rule: evenodd; stroke-linejoin: round; stroke-miterlimit: 1.5">
<path d="M0,25l55,0" style="fill: none; stroke: #fff; stroke-width: 8.33px" />
<path d="M0,46l55,0" style="fill: none; stroke: #fff; stroke-width: 8.33px" />
<path d="M-0,4l55,0" style="fill: none; stroke: #fff; stroke-width: 8.33px" />
</svg>
<svg class="icon-cross h-7 w-7 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M312.1 375c9.369 9.369 9.369 24.57 0 33.94s-24.57 9.369-33.94 0L160 289.9l-119 119c-9.369 9.369-24.57 9.369-33.94 0s-9.369-24.57 0-33.94L126.1 256L7.027 136.1c-9.369-9.369-9.369-24.57 0-33.94s24.57-9.369 33.94 0L160 222.1l119-119c9.369-9.369 24.57-9.369 33.94 0s9.369 24.57 0 33.94L193.9 256L312.1 375z" /></svg>
</button>
</div>
</nav>
<!-- [Header] -->
<header class="relative flex h-[60vh] justify-center bg-header bg-cover bg-center bg-no-repeat sm:h-[600px] sm:min-h-[calc(100vh-112px)]">
</header>
<!-- [JAVASCRIPT] ------------ -->
<script src="assets/js/script.js"></script>
</body>
Sorry to ask a question again as I asked a problem in the morning also.
This time I am facing an issue with Mathjax text. As my navbar is fixed, my texts are going inside the navbar whereas the math expressions are going above the navbar. This is annoying me from today's morning itself.
<link href="https://unpkg.com/tailwindcss#^2/dist/tailwind.min.css" rel="stylesheet"
<div class="flex flex-col h-screen">
<!-- navbar -->
<div class="fixed inset-x-0 left-0 right-0 w-full text-gray-700 bg-white dark-mode:text-gray-200 dark-mode:bg-gray-800">
<div x-data="{ open: false }" class="flex flex-col max-w-screen-xl px-4 mx-auto md:items-center md:justify-between md:flex-row md:px-6 lg:px-8">
<div class="p-4 flex flex-row items-center justify-between"> Sachchidanand Prasad
<button class="md:hidden rounded-lg focus:outline-none focus:shadow-outline" #click="open = !open">
<svg fill="currentColor" viewBox="0 0 20 20" class="w-6 h-6">
<path x-show="!open" fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM9 15a1 1 0 011-1h6a1 1 0 110 2h-6a1 1 0 01-1-1z" clip-rule="evenodd"></path>
<path x-show="open" fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
</svg>
</button>
</div>
<nav :class="{'flex': open, 'hidden': !open}" class="flex-col flex-grow pb-4 md:pb-0 hidden md:flex md:justify-end md:flex-row"> <a class="px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark-mode:bg-gray-700 dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 md:mt-0 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline" href="index.html">
Home
</a> <a class="px-4 py-2 mt-2 text-sm font-semibold bg-gray-200 text-gray-900 rounded-lg dark-mode:bg-transparent dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 md:mt-0 md:ml-4 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline" href="research.html">
Research
</a> <a class="px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 md:mt-0 md:ml-4 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline" href="cv.html">
CV
</a> </nav>
</div>
</div>
<!-- section -->
<section class="text-gray-600 body-font">
<div class="container lg:px-36 py-24 mx-auto">
<div class="flex flex-col items-center text-center justify-center">
<h2 class="text-gray-900 text-3xl title-font font-medium">Research</h2>
<div class="w-24 h-1 bg-indigo-500 rounded mt-2 mb-4"></div>
</div>
<div class="flex flex-wrap sm:-m-4 -mx-4 -mb-10 -mt-4 md:space-y-0 space-y-6">
<div class="p-4 md:w-full flex">
<div class="flex-grow lg:px-32 px-6">
<p class="mt-4 leading-relaxed text-lg text-justify"> My area of interests include <em>differential geometry</em>, <em>differential topology</em> and <em>algebraic topology</em>. More specifically, I am working on <em class="text-green-600">cut locus of a submanifold</em>. For a given Riemannian manifold $M$ and $N\subset M$ the <em class="text-green-600">cut locus of $N$</em>, $\mathrm{Cu}(N)$, is the collection of points $q\in M$ such that extension of a distance minimal geodesic joining $N$ to $q$ is no longer minimal. Here by the <em class="text-green-600">distance minimal geodesic $\gamma$ joining $N$ to $q$</em> we mean that there exists $p\in N$ such that the length of $\gamma$ from $p$ to $q$ is same as the distance from $N$ to $q$. In my recent paper (joint with Dr Somnath Basu) we have discussed the cut locus of a closed submanifold and described the relation between cut locus, Thom spaces and Morse-Bott functions. </p>
<p class="mt-4 leading-relaxed text-lg text-justify"> Currently, I am working on the cut locus of a quotient manifold and application to the classifying spaces. </p>
<p class="mt-4 leading-relaxed text-lg text-justify:"> </p>
<h2 class="mt-4 mb-4 text-gray-900 text-xl title-font font-medium" id="publications">Publications and Preprints</h2>
<ol class="pl-8 list-decimal">
<li class="text-lg"> <em>A connection between cut locus, Thom spaces and Morse-Bott functions</em> (joint with Dr Somnath Basu) ArXiv link
<div class="mt-2 ml-4 border-l-2 border-indigo-500 hidden md:block xs:hidden">
<p class="pl-2 leading-relaxed text-base text-gray-500 text-justify"> <span class="text-gray-900">Abstract:</span> Associated to every closed, embedded submanifold $N$ in a connected Riemannian manifold $M$, there is the distance function $d_N$ which measures the distance of a point in $M$ from $N$. We analyze the square of this function and show that it is Morse-Bott on the complement of the cut locus $\mathrm{Cu}(N)$ of $N$, provided $M$ is complete. Moreover, the gradient flow lines provide a deformation retraction of $M-\mathrm{Cu}(N)$ to $N$. If $M$ is a closed manifold, then we prove that the Thom space of the normal bundle of $N$ is homeomorphic to $M/\mathrm{N}$. We also discuss several interesting results which are either applications of these or related observations regarding the theory of cut locus. These results include, but are not limited to, a computation of the local homology of singular matrices, a classification of the homotopy type of the cut locus of a homology sphere inside a sphere, a deformation of the indefinite unitary group $U(p,q)$ to $U(p)\times U(q)$ and a geometric deformation of $GL(n,\mathbb{R})$ to $O(n,\mathbb{R})$ which is different from the Gram-Schmidt retraction. </p>
</div>
</li>
</ol>
</div>
</div>
</div>
</div>
</section>
<!-- footer -->
<footer class="foot mt-auto border-t border-gray-200">
<div class=" container flex flex-col flex-wrap px-4 py-1 mx-auto md:items-center lg:items-start md:flex-row md:flex-nowrap">
<div class="justify-between w-full mt-4 text-center lg:flex">
<div class="w-full px-4 lg:w-1/3 md:w-1/2">
<h2 class="mb-2 font-bold tracking-widest text-gray-900">
Useful Links
</h2>
<ul class="mb-8 space-y-2 text-sm list-none">
<li> <a class="text-gray-600 hover:text-gray-800" href="https://mathscinet.ams.org/mathscinet/" target="_blank">MathSciNet</a> </li>
<li> <a class="text-gray-600 hover:text-gray-800" href="https://www.ams.org/open-math-notes" target="_blank">AMS open Math Notes</a> </li>
<li> <a class="text-gray-600 hover:text-gray-800" href="https://mtts.org.in/" target="_blank">MTTS</a> </li>
<li> <a class="text-gray-600 hover:text-gray-800" href="https://www.atmschools.org/" target="_blank">ATM School</a> </li>
</ul>
</div>
<div class="w-full px-4 lg:w-1/3 md:w-1/2">
<h2 class="mb-2 font-bold tracking-widest text-gray-900">
Useful Links
</h2>
<ul class="mb-8 space-y-2 text-sm list-none">
<li> <a class="text-gray-600 hover:text-gray-800" href="http://www.nbhm.dae.gov.in/" target="_blank">NBHM</a> </li>
<li> <a class="text-gray-600 hover:text-gray-800">About Us</a> </li>
<li> <a class="text-gray-600 hover:text-gray-800">Blogs</a> </li>
<li> <a class="text-gray-600 hover:text-gray-800">Contact Us</a> </li>
</ul>
</div>
<div class="w-full px-4 lg:w-1/3 md:w-1/2">
<h2 class="mb-2 font-bold tracking-widest text-gray-900">
Social Networks
</h2>
<ul class="mb-8 space-y-2 text-sm list-none">
<li> <a class="text-gray-600 hover:text-gray-800" href="">Facebook</a> </li>
<li> <a class="text-gray-600 hover:text-gray-800" href="">Twitter</a> </li>
<li> <a class="text-gray-600 hover:text-gray-800" href="">Instagram</a> </li>
<li> <a class="text-gray-600 hover:text-gray-800" href="">Github</a> </li>
</ul>
</div>
</div>
</div>
<div class="flex justify-center">
<p class="text-base text-gray-400"> All rights reserved by # <a class="text-gray-400 hover:text-gray-800" href="index.html">Sachchidanand</a> 2022 </p>
</div>
</footer>
</div>
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine#v2.x.x/dist/alpine.min.js" defer></script>
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax#3/es5/tex-mml-chtml.js"></script>
<script>
MathJax = {
tex: {
inlineMath: [
['$', '$'],
['\\(', '\\)']
],
displayMath: [
['$$', '$$'],
['\\[', '\\]']
]
},
svg: {
fontCache: 'global'
}
};
</script>
We can see in the above image that the math text s over the navbar. I don't know what exactly the problem is. Any help will be appreciated.
Insert the tailwind class z-10 to the navbar container to give the navbar a higher z-Index
<link href="https://unpkg.com/tailwindcss#^2/dist/tailwind.min.css" rel="stylesheet"
<div class="flex flex-col">
<!-- navbar -->
<div class="fixed inset-x-0 left-0 right-0 w-full text-gray-700 bg-white dark-mode:text-gray-200 dark-mode:bg-gray-800 z-10">
<div x-data="{ open: false }" class="flex flex-col max-w-screen-xl px-4 mx-auto md:items-center md:justify-between md:flex-row md:px-6 lg:px-8">
<div class="p-4 flex flex-row items-center justify-between"> Sachchidanand Prasad
<button class="md:hidden rounded-lg focus:outline-none focus:shadow-outline" #click="open = !open">
<svg fill="currentColor" viewBox="0 0 20 20" class="w-6 h-6">
<path x-show="!open" fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM9 15a1 1 0 011-1h6a1 1 0 110 2h-6a1 1 0 01-1-1z" clip-rule="evenodd"></path>
<path x-show="open" fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
</svg>
</button>
</div>
<nav :class="{'flex': open, 'hidden': !open}" class="flex-col flex-grow pb-4 md:pb-0 hidden md:flex md:justify-end md:flex-row"> <a class="px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark-mode:bg-gray-700 dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 md:mt-0 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline" href="index.html">
Home
</a> <a class="px-4 py-2 mt-2 text-sm font-semibold bg-gray-200 text-gray-900 rounded-lg dark-mode:bg-transparent dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 md:mt-0 md:ml-4 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline" href="research.html">
Research
</a> <a class="px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 md:mt-0 md:ml-4 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline" href="cv.html">
CV
</a> </nav>
</div>
</div>
<!-- section -->
<section class="text-gray-600 body-font">
<div class="container lg:px-36 py-24 mx-auto">
<div class="flex flex-col items-center text-center justify-center">
<h2 class="text-gray-900 text-3xl title-font font-medium">Research</h2>
<div class="w-24 h-1 bg-indigo-500 rounded mt-2 mb-4"></div>
</div>
<div class="flex flex-wrap sm:-m-4 -mx-4 -mb-10 -mt-4 md:space-y-0 space-y-6">
<div class="p-4 md:w-full flex">
<div class="flex-grow lg:px-32 px-6">
<p class="mt-4 leading-relaxed text-lg text-justify"> My area of interests include <em>differential geometry</em>, <em>differential topology</em> and <em>algebraic topology</em>. More specifically, I am working on <em class="text-green-600">cut locus of a submanifold</em>. For a given Riemannian manifold $M$ and $N\subset M$ the <em class="text-green-600">cut locus of $N$</em>, $\mathrm{Cu}(N)$, is the collection of points $q\in M$ such that extension of a distance minimal geodesic joining $N$ to $q$ is no longer minimal. Here by the <em class="text-green-600">distance minimal geodesic $\gamma$ joining $N$ to $q$</em> we mean that there exists $p\in N$ such that the length of $\gamma$ from $p$ to $q$ is same as the distance from $N$ to $q$. In my recent paper (joint with Dr Somnath Basu) we have discussed the cut locus of a closed submanifold and described the relation between cut locus, Thom spaces and Morse-Bott functions. </p>
<p class="mt-4 leading-relaxed text-lg text-justify"> Currently, I am working on the cut locus of a quotient manifold and application to the classifying spaces. </p>
<p class="mt-4 leading-relaxed text-lg text-justify:"> </p>
<h2 class="mt-4 mb-4 text-gray-900 text-xl title-font font-medium" id="publications">Publications and Preprints</h2>
<ol class="pl-8 list-decimal">
<li class="text-lg"> <em>A connection between cut locus, Thom spaces and Morse-Bott functions</em> (joint with Dr Somnath Basu) ArXiv link
<div class="mt-2 ml-4 border-l-2 border-indigo-500 hidden md:block xs:hidden">
<p class="pl-2 leading-relaxed text-base text-gray-500 text-justify"> <span class="text-gray-900">Abstract:</span> Associated to every closed, embedded submanifold $N$ in a connected Riemannian manifold $M$, there is the distance function $d_N$ which measures the distance of a point in $M$ from $N$. We analyze the square of this function and show that it is Morse-Bott on the complement of the cut locus $\mathrm{Cu}(N)$ of $N$, provided $M$ is complete. Moreover, the gradient flow lines provide a deformation retraction of $M-\mathrm{Cu}(N)$ to $N$. If $M$ is a closed manifold, then we prove that the Thom space of the normal bundle of $N$ is homeomorphic to $M/\mathrm{N}$. We also discuss several interesting results which are either applications of these or related observations regarding the theory of cut locus. These results include, but are not limited to, a computation of the local homology of singular matrices, a classification of the homotopy type of the cut locus of a homology sphere inside a sphere, a deformation of the indefinite unitary group $U(p,q)$ to $U(p)\times U(q)$ and a geometric deformation of $GL(n,\mathbb{R})$ to $O(n,\mathbb{R})$ which is different from the Gram-Schmidt retraction. </p>
</div>
</li>
</ol>
</div>
</div>
</div>
</div>
</section>
<!-- footer -->
<footer class="foot mt-auto border-t border-gray-200">
<div class=" container flex flex-col flex-wrap px-4 py-1 mx-auto md:items-center lg:items-start md:flex-row md:flex-nowrap">
<div class="justify-between w-full mt-4 text-center lg:flex">
<div class="w-full px-4 lg:w-1/3 md:w-1/2">
<h2 class="mb-2 font-bold tracking-widest text-gray-900">
Useful Links
</h2>
<ul class="mb-8 space-y-2 text-sm list-none">
<li> <a class="text-gray-600 hover:text-gray-800" href="https://mathscinet.ams.org/mathscinet/" target="_blank">MathSciNet</a> </li>
<li> <a class="text-gray-600 hover:text-gray-800" href="https://www.ams.org/open-math-notes" target="_blank">AMS open Math Notes</a> </li>
<li> <a class="text-gray-600 hover:text-gray-800" href="https://mtts.org.in/" target="_blank">MTTS</a> </li>
<li> <a class="text-gray-600 hover:text-gray-800" href="https://www.atmschools.org/" target="_blank">ATM School</a> </li>
</ul>
</div>
<div class="w-full px-4 lg:w-1/3 md:w-1/2">
<h2 class="mb-2 font-bold tracking-widest text-gray-900">
Useful Links
</h2>
<ul class="mb-8 space-y-2 text-sm list-none">
<li> <a class="text-gray-600 hover:text-gray-800" href="http://www.nbhm.dae.gov.in/" target="_blank">NBHM</a> </li>
<li> <a class="text-gray-600 hover:text-gray-800">About Us</a> </li>
<li> <a class="text-gray-600 hover:text-gray-800">Blogs</a> </li>
<li> <a class="text-gray-600 hover:text-gray-800">Contact Us</a> </li>
</ul>
</div>
<div class="w-full px-4 lg:w-1/3 md:w-1/2">
<h2 class="mb-2 font-bold tracking-widest text-gray-900">
Social Networks
</h2>
<ul class="mb-8 space-y-2 text-sm list-none">
<li> <a class="text-gray-600 hover:text-gray-800" href="">Facebook</a> </li>
<li> <a class="text-gray-600 hover:text-gray-800" href="">Twitter</a> </li>
<li> <a class="text-gray-600 hover:text-gray-800" href="">Instagram</a> </li>
<li> <a class="text-gray-600 hover:text-gray-800" href="">Github</a> </li>
</ul>
</div>
</div>
</div>
<div class="flex justify-center">
<p class="text-base text-gray-400"> All rights reserved by # <a class="text-gray-400 hover:text-gray-800" href="index.html">Sachchidanand</a> 2022 </p>
</div>
</footer>
</div>
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine#v2.x.x/dist/alpine.min.js" defer></script>
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax#3/es5/tex-mml-chtml.js"></script>
<script>
MathJax = {
tex: {
inlineMath: [
['$', '$'],
['\\(', '\\)']
],
displayMath: [
['$$', '$$'],
['\\[', '\\]']
]
},
svg: {
fontCache: 'global'
}
};
</script>
I'm trying to create a Mega Menu that triggers on Hover, using Tailwind CSS and Alpinejs. I kind of having it working, but it's really buggy.
I've tried adding x-on:mouseleave to different elements but it will either flicker constantly or only disappear when moving away from certain areas. So it will either disappear when moving below the menu and not when moving above and vice versa.
Any insight would be much appreciated!
https://codepen.io/kennyk3/pen/yLJmzYJ
<div class="bg-blue-800 hidden md:block">
<div class="max-w-screen-xl mx-auto">
<nav class="flex items-center justify-between flex-wrap">
<div class="w-full block flex-grow md:flex md:items-center md:w-auto">
<div class="font-bold md:flex-grow">
<ul class="flex justify-between">
<li>
LINK
</li>
<li>
LINK
</li>
<li>
LINK
</li>
<li>
LINK
</li>
<li class="group hover:bg-white">
<div x-data="{ resourcesMenu: false }" x-on:mouseover="resourcesMenu = !resourcesMenu" x-on:mouseleave="resourcesMenu = !resourcesMenu">
MEGA MENU
<div x-show="resourcesMenu" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0 -translate-y-1" x-transition:enter-end="opacity-100 translate-y-0" x-transition:leave="transition ease-in duration-75" x-transition:leave-start="opacity-100 translate-y-0" x-transition:leave-end="opacity-0 -translate-y-1" class="absolute inset-x-0 transform shadow-lg -mt-1 z-10">
<div class="bg-white">
<div class="max-w-7xl mx-auto grid gap-y-6 px-4 py-6 sm:grid-cols-2 sm:gap-8 sm:px-6 sm:py-8 lg:grid-cols-4 lg:px-8 lg:py-12 xl:py-16">
<a href="#" class="-m-3 p-3 flex flex-col justify-between rounded-lg hover:bg-gray-50 transition ease-in-out duration-150">
<div class="flex md:h-full lg:flex-col">
<div class="flex-shrink-0">
<div class="inline-flex items-center justify-center h-10 w-10 rounded-md bg-indigo-500 text-white sm:h-12 sm:w-12">
<svg class="h-6 w-6" x-description="Heroicon name: chart-bar" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
</svg>
</div>
</div>
<div class="ml-4 md:flex-1 md:flex md:flex-col md:justify-between lg:ml-0 lg:mt-4">
<div>
<p class="text-base font-medium text-gray-900">
Analytics
</p>
<p class="mt-1 text-sm text-gray-500">
Get a better understanding of where your traffic is coming from.
</p>
</div>
<p class="mt-2 text-sm font-medium text-indigo-600 lg:mt-4">Learn more <span aria-hidden="true">→</span></p>
</div>
</div>
</a>
<a href="#" class="-m-3 p-3 flex flex-col justify-between rounded-lg hover:bg-gray-50 transition ease-in-out duration-150">
<div class="flex md:h-full lg:flex-col">
<div class="flex-shrink-0">
<div class="inline-flex items-center justify-center h-10 w-10 rounded-md bg-indigo-500 text-white sm:h-12 sm:w-12">
<svg class="h-6 w-6" x-description="Heroicon name: cursor-click" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122"></path>
</svg>
</div>
</div>
<div class="ml-4 md:flex-1 md:flex md:flex-col md:justify-between lg:ml-0 lg:mt-4">
<div>
<p class="text-base font-medium text-gray-900">
Engagement
</p>
<p class="mt-1 text-sm text-gray-500">
Speak directly to your customers in a more meaningful way.
</p>
</div>
<p class="mt-2 text-sm font-medium text-indigo-600 lg:mt-4">Learn more <span aria-hidden="true">→</span></p>
</div>
</div>
</a>
<a href="#" class="-m-3 p-3 flex flex-col justify-between rounded-lg hover:bg-gray-50 transition ease-in-out duration-150">
<div class="flex md:h-full lg:flex-col">
<div class="flex-shrink-0">
<div class="inline-flex items-center justify-center h-10 w-10 rounded-md bg-indigo-500 text-white sm:h-12 sm:w-12">
<svg class="h-6 w-6" x-description="Heroicon name: shield-check" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path>
</svg>
</div>
</div>
<div class="ml-4 md:flex-1 md:flex md:flex-col md:justify-between lg:ml-0 lg:mt-4">
<div>
<p class="text-base font-medium text-gray-900">
Security
</p>
<p class="mt-1 text-sm text-gray-500">
Your customers' data will be safe and secure.
</p>
</div>
<p class="mt-2 text-sm font-medium text-indigo-600 lg:mt-4">Learn more <span aria-hidden="true">→</span></p>
</div>
</div>
</a>
<a href="#" class="-m-3 p-3 flex flex-col justify-between rounded-lg hover:bg-gray-50 transition ease-in-out duration-150">
<div class="flex md:h-full lg:flex-col">
<div class="flex-shrink-0">
<div class="inline-flex items-center justify-center h-10 w-10 rounded-md bg-indigo-500 text-white sm:h-12 sm:w-12">
<svg class="h-6 w-6" x-description="Heroicon name: view-grid" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"></path>
</svg>
</div>
</div>
<div class="ml-4 md:flex-1 md:flex md:flex-col md:justify-between lg:ml-0 lg:mt-4">
<div>
<p class="text-base font-medium text-gray-900">
Integrations
</p>
<p class="mt-1 text-sm text-gray-500">
Connect with third-party tools that you're already using.
</p>
</div>
<p class="mt-2 text-sm font-medium text-indigo-600 lg:mt-4">Learn more <span aria-hidden="true">→</span></p>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</li>
<li>
LINK
</li>
<li class="md:hidden lg:inline-block">
LINK
</li>
<li class="md:hidden">
LINK
</li>
<li>
LINK
</li>
<li class="md:hidden lg:inline-block">
LINK
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
Change your trigger event from mouseover to mouseenter. The problem you're having is mouseover is triggered for the parent and its child elements.
See: https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseover_event
The mouseover event is fired at an Element when a pointing device (such as a mouse or trackpad) is used to move the cursor onto the element or one of its child elements.
Wheres mouseenter will be triggered once.