Topic: Slim navbar Bug?
The Slim Navbar makes the main element get an additional padding of it's width:
Check the slim example here:
https://mdbootstrap.com/docs/standard/navigation/sidenav/
If the sidebar is open, the content div gets a padding of 260 px (which on the page makes it appear to the right.
<div style="padding: 20px 20px 20px 260px; margin-right: 0px; transition: all 0s ease 0s;" class="text-center" id="slim-content">
<button data-mdb-toggle="sidenav" data-mdb-target="#sidenav-4" class="btn btn-primary" aria-controls="#sidenav-4" aria-haspopup="true" style="" aria-expanded="true">
<i class="fas fa-bars"></i>
</button>
<button id="slim-toggler" class="btn btn-primary" style="">Toggle slim</button>
<div class="d-flex justify-content-center my-5"></div>
</div>
Why is that this way?
Do you mean the sidenav or navbar component? These are two different components. I assume it's about sidenav.
This happens when you have data-mdb-mode="side" set. Mode side just works like that. If you want sidenav to cover or move the content of the page you need to change the mode to over or push. This is shown in this example: https://mdbootstrap.com/docs/standard/navigation/sidenav/#section-sidenav-positioning
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: Yes
- Technology: MDB Standard
- MDB Version: MDB5 4.0.0
- Device: Any
- Browser: Any
- OS: Any
- Provided sample code: No
- Provided link: Yes