Topic: fixed, open by default sidenav
This is more a question of documentation and capability vs. a bug.
I am trying to see if it is possible to have a sidenav that can slide open and shut, but that doesn't work as a modal overlay/lightbox and actually takes up space on the left of the page (shifts content to the right) and can be enabled to be open by default.
It SEEMS as though this may be possible (there is a "mode" parameter...and I read about this idea of [fixed] and such), but I am not clear how to make it work. Is there a reference that defines the valid values for the parameters or updated examples that are being maintained? I thought I found a sample of this at https://mdbootstrap.com/live/_MDB/index/docs/page-layouts/side-nav-fixed-navbar-fixed.html but it doesn't look any different than the other examples I am seeing.
Thank you for any help.
-Christian
. . . .
Expected behavior
Actual behavior
Resources (screenshots, code snippets etc.)
Hi,
If I understood you correctly you want to have a Sidenav that will overlap the content on slide-in without pushing it. To achieve it you have to use:
$(".button-collapse").sideNav({
mode: 'over'
});
Also, you have to remember to place the .collapse-button element in the place where it won't be overlapped by the Sidenav. In my example, I added proper margin-left so it will be visible even with opened Sidenav. Please see my snippet:
https://mdbootstrap.com/snippets/jquery/marcin-luczak/2810078
I hope that answers your question.
Regards, Marcin
christianhall free commented 4 years ago
Thank you for taking the time to answer. Actually, what I want is not the overlap, but to have the sidenav push the content...so when the sidenav is open (and it should be open by default), it is part of the interface vs. a modal panel.
Marcin Luczak staff commented 4 years ago
Hi,
In this case you can try to use and customize SideNav with pushed content example https://mdbootstrap.com/docs/b4/jquery/navigation/sidenav1/#pushed-content. Please see the snippet of this example https://mdbootstrap.com/snippets/jquery/mateusz-lubianka/1530665
Regards, Marcin
christianhall free commented 4 years ago
Yes. This looks exactly like what I need. Thanks. Looks like I can just set isOpen to true at the outset to have it start in the open position.
christianhall free commented 4 years ago
It looks like it falls apart a bit if the window is resized smaller...it kicks back into overlay mode. I will look at the JavaScript and see if I can see what is happening.
My attempts to set isOpen to true in onReady didn't work, but figuring it might just be that online tool. I'll pull it out into an actual example to play with.
Marcin Luczak staff commented 4 years ago
I'm glad that this example is helpful. Overlapping the content on smaller window sizes is due to UX on mobile devices where in most cases pushing the content out of the view is not desirable behavior. Yet, you can still manipulate values inside the example above to make content pushed on smaller devices with proper padding.
I wish you good work with that.
Regards, Marcin
christianhall free commented 4 years ago
I still don't see how to have it be open by default. It seems that most of the behavior is happening in the MDB library and this code just "adjusts" it after the fact. Is there a setting for its defaults?
Marcin Luczak staff commented 4 years ago
Adding the .fixed class to the main sidenav element makes it open by default on larger screens. There is no default 'open by default' feature for mobile devices, only those 'adjust after fact' functionalities.
Regards, Marcin
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Free
- Premium support: No
- Technology: MDB jQuery
- MDB Version: 4.19.1
- Device: MacBook Pro
- Browser: Chrome
- OS: macOS
- Provided sample code: No
- Provided link: Yes