Dear Support Team,
I hope this message finds you well. My name is Ahmad Bilal, and I am utilizing the KT Metronic theme for our projects. First and foremost, I'd like to express my appreciation for the quality of your theme and the features it offers.
I am writing to seek assistance with a specific issue we have encountered while using the KT Metronic theme. This is my second time reaching out to you about this matter. We are utilizing the KT menu modal that is triggered by a button. However, we are facing a challenge with closing or hiding the menu modal when interacting with other buttons, routes, or anchor links.
As you can see in the video (linked below), when I click on an option, it opens the option modal, and when I click outside, it successfully closes the modal. However, the issue arises when I click on a button or any other hyperlink; the menu modal does not close as demonstrated in the video.
To get a better understanding of the problem, please check the video through the provided link for a visual demonstration: https://drive.google.com/file/d/1n2ukDKlByDVEyk4FJVgKmjJW44-ChAyf/view?usp=sharing
Could you kindly provide guidance or recommendations on how we can achieve seamless behavior when interacting with other elements?
Furthermore, we would like to add an overlay on the body when the menu is open, similar to what we do with other modals. We would greatly appreciate it if you could guide us on the process of implementing this feature correctly. If there are any specific functions or methods that we should be utilizing, please provide us with the necessary documentation or code examples.
Thank you very much for your time and support. We are looking forward to your assistance in resolving this issue and optimizing the user experience for our projects.
Best Regards!
Hi Ahmad,
If clicking a button doesn't close the menu as expected, please check if you are using event.stopPropagation()
in your button's event handler.
Unfortunately, our menu component doesn't natively support overlays. However, you can manually create and remove an overlay element using the menu's kt.menu.dropdown.show
and kt.menu.dropdown.hide
events.
For example, please refer to this gist.
Regards,
Lauris Stepanovs,
Keenthemes Support Team