Topic: Sidenav to Navbar on breakpoint
Lewis priority asked 3 years 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?
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Resolved
Specification of the issue
- ForumUser: Priority
- 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
Dawid Wajszczuk staff commented 3 years ago
Do you mean something like this? https://mdbootstrap.com/docs/standard/navigation/sidenav/#subsection-mdb-navigation
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 priority commented 3 years 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; }
};
setMode();
// Event listeners
window.addEventListener('resize', setMode);
Dawid Wajszczuk staff commented 3 years 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.