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

Prevent responsive design / Sidebar 'display:none'


Hi folks,

how to prevent the responsive design especially 'display:none' for the sidebar?

Used version: Metronic 8.1.6 / HTML


Cheers


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


Hi guys,

I was able to 'fix' the sidebar with the option
data-kt-drawer="false"
This is not documented?

But know I have the problem, that the content slides under the sidebar (This can be reproduced with the official demos).



What to do here?



Hi,

May I know which Metronic demo are you referring and how to reproduce that bug ?

Do you want to disable responsiveness for the entire layout and content? To do so you can refer to this site and change the meta code to disable the responsive mode.

Regards.



Sure, I'm using demo 36.
For reproducing I used the demo36 standard index.html and changed the following css (from display:none):

@media (max-width: 991.98px)
.app-sidebar {
display:flex;




Is this the wrong way? Could you tell me the correct one how to make the sidebar permanently visible and prevent the 'content sliding' for the mobile view?

Any help is much appreciated.



Hi,

Please follow the below steps:

1) Remove data-kt-drawer="true" attribute from the sidebar

2) Add d-flex class to the sidebar element.

3) Go to src/sass/layout/_sidebar.scss and add below code:


.app-main,
.app-toolbar {
margin-left: $app-sidebar-base-width !important;
}


4) Then recompile your assets folder with Gulp or Webpack.

Please note that the build tools are required only in the development environment just to compile the assets when the source folder files are modified. In the hosting/server deployment, you will only need the compile assets, no need to install the build tools dependencies there.

Regards,
Sean



Sorry for that late answer.

I did as you said. But instead of a recompiling (I'm using, the html files only) I added the following to the style.bundle.css:


.app-main,
.app-toolbar {
margin-left: 225px !important;
}


225px because I added data-kt-drawer-width="225px" to kt_app_sidebar.

Result is not what I need sad



Hi,

Please try to recompile it as the code I provided works for sass, not for CSS.
Installing the build tools and running the gulp task may take you about 10 mins as explained here.

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