Sidenav to Navbar on breakpoint


Topic: Sidenav to Navbar on breakpoint

Lewis pro premium priority asked 9 months ago

When on a xl + device, I would like a static Sidenav to the left but when moving to a device with a smaller viewport, I would like it to change to a navbar with a button to make the sidenav flyout over the content. Is there a native way to do this?

Also, on the examples of sidenav, I don't seem to be able to put content into the main window without it overlapping the sidenav. Maybe I am missing something?


Dawid Wajszczuk staff commented 9 months ago

  1. Do you mean something like this? https://mdbootstrap.com/docs/standard/navigation/sidenav/#subsection-mdb-navigation

  2. I'm not sure if this is what you are referring to, but maybe you need to add left padding as in the example above or change sidenav's position following this example: https://mdbootstrap.com/docs/standard/navigation/sidenav/#section-sidenav-positioning


Lewis pro premium priority commented 9 months ago

Thanks Dawid, this is what I am after. Just missed it when looking through the examples. Only thing I can't get working is the toggler Sidenav:

Toggler:

Javascript:// Global menu changerconst sidenav = document.getElementById('sidenav');const instance = mdb.Sidenav.getInstance(sidenav);

let innerWidth = null;

const setMode = (e) => { // Check necessary for Android devices if (window.innerWidth === innerWidth) { return; }

innerWidth = window.innerWidth;

if (window.innerWidth < 660) {
  instance.changeMode('over');
  instance.hide();
} else {
  instance.changeMode('side');
  instance.show();
}

};

setMode();

// Event listeners

window.addEventListener('resize', setMode);


Dawid Wajszczuk staff commented 9 months ago

Works fine in this snippet that I have created: https://mdbootstrap.com/snippets/standard/d-wajszczuk/3299439#js-tab-view. Maybe there is some typo or wrong id. Copy & paste code from my snippet and see if it works.


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Resolved

Specification of the issue
  • User: Pro
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 3.9.0
  • Device: Laptop
  • Browser: Edge
  • OS: W10
  • Provided sample code: No
  • Provided link: No