Get 2025 Templates Mega Bundle!$1000 worth of 19 Bootstrap HTML, Vue & React Templates + 3 Vector Sets for just $99
Get for 99$

MetronicV9.1 version sidebar z-index problem on mobile!


Hello, I started my project using the laravel integration documentation in the metronic version I specified. But on mobile devices, sidebar z-index:100 does not happen. Therefore, the drawer-backdrop stays on the sidebar. How do I solve this problem! It's a bit urgent.


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 (3)


Hi Ä°sa Yalçın

Sorry for the delay. You might need to adjust the z-index of the sidebar, so it appears above the backdrop.

Would you share a screenshot or the specific CSS affecting the sidebar and backdrop? Which demo number you use? Let us know if you need further assistance.

Best regards.



Hi,

Are you using the latest Metronic 9.1.2 ? On mobile the sidebar can not be opened ?

Can you check the default HTML tempalte https://keenthemes.com/metronic/tailwind/demo1/ ?

Do you get the same issue ? If not then you will need to double check the HTML code with the original HTML code from the html version.

Regards,
Sean



Yes, I am using the latest version. The thing is that the menu opens on the mobile, but since the background is on top of the menu, no click is made. I've checked it again and again. I've stood up my laravel project using your github repo. I haven't solved the problem yet.


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  :(