Topic: Sidebar collapse
tod pro asked 7 years ago
Marta Wierzbicka staff answered 5 years ago
Hi,
Use the option "breakpoint" in your script: https://mdbootstrap.com/docs/jquery/navigation/sidenav/#options.
Best, Marta
Jean Lambert free answered 5 years ago
I have the same problem, what can I do to change sidenav breakpoints without touching mdb code?
NorthGates pro answered 7 years ago
Ok, got it. Here it is, sidebar for the breakpoint 993px instead of breakpoint 768px mentionned above.
* Compatible with MDB Pro 4.4.1, MDB Admin Dashboard 4.3.0
Find in mdb.js:
var sn_breakpoint = 1440;
replace with:
/* edited by me: 1440 */ var sn_breakpoint = 993;
Find in mdb.css:
@media (max-width: 1440px) { .fixed-sn .double-nav, .fixed-sn main, .fixed-sn footer { padding-left: 0; } }
Replace with:
/* edited by me: 1440px */ @media (max-width: 993px) { .fixed-sn .double-nav, .fixed-sn main, .fixed-sn footer { padding-left: 0; } }
Find:
@media (min-width: 1440px) { .double-nav .button-collapse { display: none; } } @media (max-width: 1440px) { .double-nav .button-collapse { display: block; position: relative; font-size: 1.4rem; margin-top: 2px; margin-right: 10px; margin-left: 10px; } }
Replace with:
/* edited by me: 1440px */ @media (min-width: 993px) { .double-nav .button-collapse { display: none; } } /* edited by me: 1440px*/ @media (max-width: 993px) { .double-nav .button-collapse { display: block; position: relative; font-size: 1.4rem; margin-top: 2px; margin-right: 10px; margin-left: 10px; } }
Find this to change the show/hide breadcrumb-dn (at a smaller breakpoint):
@media (max-width: 993px) { .double-nav .breadcrumb-dn { display: none; } }
Replace with:
/* edited by me: 993px */ @media (max-width: 320px) { .double-nav .breadcrumb-dn { display: none; } }
Kamil Paciepnik free answered 7 years ago
@media (max-width: 1280px) {
/*collapse code*/
}
If you have a problem, please write to me.
Regards
NorthGates pro commented 7 years ago
Hi Kamil, I cannot find out how to prevent the sidebar collapse until the width is less than 768px. Can you show me? I would like to override the default sidebar collapse inside my own css overrides.FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Pro
- Premium support: No
- Technology: General Bootstrap questions
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No