Topic: Sidenav items don't expand
Hi,
I'm trying to use the basic sidenav example https://mdbootstrap.com/docs/standard/navigation/sidenav/, but for some reason the sidenav items do not expand and collapse.
I have add the following css:
<link href="{{ url_for('static', path='/mdb/css/mdb.min.css') }}" rel="stylesheet">
<link href="{{ url_for('static', path='/mdb/css/modules/sidenav.min.css') }}" rel="stylesheet">
and js:
<script type="text/javascript" src="{{ url_for('static', path='mdb/js/mdb.min.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', path='mdb/js/modules/sidenav.min.js') }}">
</script>
Do I need anything else? Thanks, Mat
Hello, it should be enough. Your paths may be leading to unexisting files. Do you experience errors in the console? Is anything of above throwing 404? Could you provide the exact code that you used in your project? You can recreate it in snippets: https://mdbootstrap.com/snippets/
Mat Siems pro premium priority commented 3 years ago
Hi Michał,
Ok, because in the default index.html you don't have the specific 'sidenav.min.js' only - - - -
it seems to be a js issue as have this error in the console:
Cannot read properties of undefined (reading 'toggle') at Module. (all.min.js:290:55085) at o (all.min.js:290:130) at EcommerceGallery (all.min.js:290:929) at all.min.js:290:940
Thanks, Mat
Hi Michał,
It seems the "mdb.min.js" is the issue, as soon I remove it the sidebar works fine.
However I still need the 'mdb.min.js' as my modals stop working:
<script type="text/javascript" src="{{ url_for('static', path='mdb/js/mdb.min.js') }}"></script>
Any ideas why it is conflicting?
What happens if you delete below lines responsible for sidenav only?
<link href="{{ url_for('static', path='/mdb/css/modules/sidenav.min.css') }}" rel="stylesheet">
<script type="text/javascript" src="{{ url_for('static', path='mdb/js/modules/sidenav.min.js') }}">
Try running your project only on mdb.min.js and mdb.min.css imports. How does the sidenav behave?
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 3.11.0
- Device: Dell
- Browser: Chrome
- OS: windows 10
- Provided sample code: No
- Provided link: Yes