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
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
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.
