Topic: SideNav Main/Content Padding
Jordan free asked 3 years ago
Expected behavior I expect the left padding added to the main section (id: page-content) to match the width of the SideNav.
Actual behavior The expected padding is doubled and the page content is not adjacent to the Sidenav.
Resources (screenshots, code snippets etc.) https://mdbootstrap.com/snippets/standard/mcfarland/2700573
Piotr Urbaniak free answered 3 years ago
Hello Jordan,
I prepared a snippet for You, check if this solves your problem,
Code snippet: https://mdbootstrap.com/snippets/standard/mcfarland/2700573#js-tab-view
Best regards
Piotr Urbaniak free answered 3 years ago
Hello Jordan,
If I understand correctly, I suggest adding the data-mode="over"
attribute to the <div>class="sidenav d-flex flex-column">
and then add padding-left: 200px
property in the <div id="page-content">
. If this does not solve your problem, please provide a more detailed description.
Best regards
Jordan free commented 3 years ago
Hi @Piotr Urbaniak, I want the side nav to be displayed next to the page content - not over it. Sorry for not clarifying in OP.
Thank you for the suggestion!
Piotr Urbaniak free commented 3 years ago
Did You try set sidenav div as child element and add data-mode=side to it? Check our tab "Positioning" on https://mdbootstrap.com/docs/standard/navigation/sidenav/ Best regards
Jordan free commented 3 years ago
If I am understanding you correctly, I believe that is what I did in the snippet I originally posted and it did not work.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- ForumUser: Free
- Premium support: No
- Technology: MDB Standard
- MDB Version: 2.0.0
- Device: PC
- Browser: Chrome
- OS: Windows 10
- Provided sample code: No
- Provided link: Yes