ilya premium asked 2 years ago


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?


Grzegorz Bujański staff answered 2 years ago


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



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: Premium
  • 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