Get 2024 Templates Mega Bundle!19 Bootstrap HTML, Vue & React Templates + 3 Vector Sets
Get for 99$

Assistance Request for KT Metronic Theme Menu Modal Issue


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!


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (1)


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


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(