Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!

tod pro asked 7 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?

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


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.


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No