Why does my header mega menu close immediately after hovering?

Store Design
1

Hi, in my stores navbar, when I hover on the collection option, mega menu opens but doesnt stay open. It closes as soon as I remove the cursor from the collection option. I want it to stay opened and it’ll be closed when user will click outside the menu.

Also I want to add a opening and closing animation like its slowly coming down and going up.

Im also attaching my header.liquid file code

Site address: https://nielapparel.com/

Screenshot 2023-08-17 035631.png
Screenshot 2023-08-17 035631.png1920×982 245 KB

2

Hi @Shoaib77

This is David at SalesHunterThemes.

Thank you for your question.
You can try follow this path:

Themes => edit code => asset => base.css

and add this code to bottom of the file base.css

@media(min-width: 990px){
	.header-wrapper .header {
		padding-top: 0;
		padding-bototm: 0;
	}
	.header__heading .header__heading-link{
		padding-block: 0;
	}

	.header__menu-item{
	    padding-block: 32.33px;
	}
}
3

im sorry. but its not working. The mega menu closes whenever I remove the cursor from colloection text

4

As I said above, please try to add the code into the bottom of the file, not on the top

5

yes, did that also. still not working