Sidebar collapse

Topic: Sidebar collapse

tod pro asked 10 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 9 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 7 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 10 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 9 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 answered 7 years ago