Super Sale Limited Time 50% OFF for All-Access Plans
Save 50% Now
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 year ago
HTML
2 Answers
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (2)

user
Phill Jones 1 year 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 Author 1 year 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
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(