Sidebar collapse

Topic: Sidebar collapse

tod pro asked 8 years ago

Using your template for "Double Navigation with fixed Sidebar and fixed Navbar" the Sidebar collapses at 1440 width. I'd like to change that so it waits until 1280. I thought changing/commenting out all entries for @media only screen and (max-width: 1440px) would do it, but it has no effect. Can you please tell me how to prevent the Sidebar collapse at 1440 width?

Add comment

NorthGates pro answered 7 years ago

2 0 Best answer

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;
    }
}

Add comment

Jean Lambert answered 5 years ago

1 0 Best answer

I have the same problem, what can I do to change sidenav breakpoints without touching mdb code?

Add comment

Kamil Paciepnik answered 8 years ago

0 1 Best answer

Hi tod, the best solution would be if you add to your code css:

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

Add comment

Marta Szymanska staff pro premium answered 5 years ago