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,
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
<img src="https://i.postimg.cc/W15Ytzwb/dashboard-sidebar-bug.png"/>
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.
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;
<img src="https://i.postimg.cc/m2DtkbFQ/dashboard-sidebar-repro.png" />
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,
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.
Hi guys,
I was able to 'fix' the sidebar with the option
<img src="" />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).
<img src="https://i.postimg.cc/q7pHZWsM/dashboard-sidebar.png" />
What to do here?
