Christmas Sale! Limited Time Only - Enjoy 30% Off Metronic Extended License!
Buy for 669$  969$
Light
Dark
System
Ask  Question

App Sidebar minimized class


Hi,

Is there a class or method to toggle elements based on if the app sidebar is minimized or not? Similar to how the logo works:

<img alt="Logo" src="~/assets/custom/logo/logo-full-horizontal.svg" class="h-25px app-sidebar-logo-default"/>
<img alt="Logo" src="~/assets/custom/logo/icon-transparent.svg" class="h-25px app-sidebar-logo-minimize"/>

So I want an element to show or hide based on if the app sidebar is minimized or not.

Thanks


J
Joe Yeomans 1 month ago
HTML
2 Answers
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 (2)

user
Phill Jones 3 weeks ago

Accesos Directos FRP ofrece una forma rápida y sencilla de eludir la protección de restablecimiento de fábrica en dispositivos Android. Con esta herramienta, puedes saltarte el bloqueo de FRP sin complicaciones ni perder datos importantes. Es ideal para quienes buscan una solución ágil y confiable para desbloquear su teléfono Android rápidamente, asegurando un proceso eficiente y seguro.
user
Sean Author1 month ago

Hi,

If you are referring to Metronic 8 Bootstrap Demo 1 there is data-kt-app-sidebar-minimize="on" attribute available when the sidebar minimizes mode is on.
You can use a custom CSS to apply a style to your element.

<per>
<style>[data-kt-app-sidebar-minimize="on"] .my-button { display: none }</style>
</pre>

Regards,
Sean


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