Topic: sidenav right doesn't work
The right side option doesn't work. Is it a bug? This is my code:
<!-- Sidenav -->
<nav
id="sidenav-1"
class="sidenav"
data-mdb-right="true"
data-mdb-hidden="true"
>
<ul class="sidenav-menu">
<li class="sidenav-item">
<a class="sidenav-link">
<i class="far fa-smile fa-fw me-3"></i><span>Link 1</span></a
>
</li>
<li class="sidenav-item">
<a class="sidenav-link"
><i class="fas fa-grin fa-fw me-3"></i><span>Category 1</span></a
>
<ul class="sidenav-collapse show">
<li class="sidenav-item">
<a class="sidenav-link">Link 2</a>
</li>
<li class="sidenav-item">
<a class="sidenav-link">Link 3</a>
</li>
</ul>
</li>
<li class="sidenav-item">
<a class="sidenav-link"
><i class="fas fa-grin-wink fa-fw me-3"></i><span>Category 2</span></a
>
<ul class="sidenav-collapse">
<li class="sidenav-item">
<a class="sidenav-link">Link 4</a>
</li>
<li class="sidenav-item">
<a class="sidenav-link"
>Link 5</a
>
</li>
</ul>
</li>
</ul>
</nav>
<!-- Sidenav -->
I also had this problem - it seemed to be working intermittently, depending on the page content. Then I realised it was not working when the page contents scrolled. As soon as the vertical scrollbar appeared - the right nav stopped working. If you look at the snippet included above - and add content that causes the example to scroll, the right nav stops working. I just added
<h1 style="margin-top:800px;">dfsdfsdfdsfdsfs</h1>
under the nav button in the snippet, and the nav stopped working.
After breaking down the example on the MDB navigation documentation I discovered I needed to add data-mdb-position="absolute" to the sidenav attributes!
<nav id ="sidenav" class="sidenav" data-mdb-right="true" data-mdb-position="absolute" data-mdb-hidden="true">
Hope this helps.
Grzegorz Bujański staff commented 3 years ago
This is just a workaround for the problems. In fact, when I adding extra content there is a problem with opening sidenav. We will fix it as soon as possible.
CWaite pro premium priority commented 3 years ago
And I've just noticed this workaround just displays the side-nav off to the right, you get a horizontal scrollbar, so it is not really a good solution. Would be very keen to know when it is fixed - will switch to a left nav for now.
Grzegorz Bujański staff commented 3 years ago
Whenever we release a new version, we inform about it and the information will appear in our changelog.
Danny pro premium priority commented 3 years ago
When is this fixed?
kpienkowska staff commented 3 years ago
We have added such a task and will include it in the next release.
Danny pro premium priority commented 3 years ago
Is there an workaround? I need it asap
kpienkowska staff commented 3 years ago
Try this:https://mdbootstrap.com/snippets/standard/kpienkowska/4013747There is data-mdb-position="absolute" and some custom CSS added.
Danny pro premium priority commented 3 years ago
Thats not working, nav items will be scrolled above, and when closing you scroll back to the top. Please a good fix
kpienkowska staff commented 3 years ago
https://mdbootstrap.com/snippets/standard/kpienkowska/4018053 I hope this is what you need.
Danny pro premium priority commented 3 years ago
Now its working, but you have to add position: fixed !important; to #sidenav-1, else its the menu is scrolling to invisible. Thank you, and I hope it will be fixed soon on the right way!
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: MDB Standard
- MDB Version: MDB5 3.10.2
- Device: Any
- Browser: Any
- OS: Any
- Provided sample code: No
- Provided link: No
Grzegorz Bujański staff commented 3 years ago
What exactly doesn't work? I checked this code and everything works fine for me.
pawled commented 3 years ago
After adding data-mdb-right="true" sidenav stops working. It doesn't appear as previously, after toggler clicking. Without this parameter everything is alright.
It works just in playground mode.
Grzegorz Bujański staff commented 3 years ago
@pawled look at this snippet: https://mdbootstrap.com/snippets/standard/grzegorz-bujanski/3644605 this example uses sidenav with option right. And its working. Can you create a snippet where this option is not working correctly?