Topic: Adding the slim navbar to a project
*Copy and paste slim sidenav bar from the MDB docs into project and have it work with the collapses collapsing and expanding as expected. I made a snippet and it works on your site, but it doesn't work on mine. it would be nice if there was a base template you could experiment with that you could just plug something into and it would work so you could see how to implement it and then carry it to your project -- does such a thing exist? A boilerplate for MDBootstrap? *
the collapses don't work - their open and don't close
** Simple Sidebar - Start Bootstrap Template
<!--
font google used for accessing headling in logo
https://fonts.google.com/specimen/Saira+Semi+Condensed#license
CSS rules to specify families
font-family: 'Saira Semi Condensed', sans-serif;
-->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Saira+Semi+Condensed:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
<!-- weather icons -->
<link rel="stylesheet" href="../a___assets/css/weather-icons.css">
<link rel="stylesheet" href="../a___assets/css/weather-icons-wind.css">
</head>
<body>
<!-- Sidebar-->
Link 1
Category 1
<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"Category 2
<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
</li> </ul> </li>
<!-- Bootstrap core JS-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<!-- Core theme JS-->
<script src="js/scripts.js"></script>
</body>
https://mdbootstrap.com/snippets/standard/monkee/3192581**
https://mdbootstrap.com/snippets/standard/monkee/3192618
Hi,
The boilerplate is in your MDB package in index.html file. These examples work on our page because JS and CSS files are link to our page.
Your issue occurs due to not having our files linked. Just simply add
<link rel="stylesheet" href="css/mdb.min.css" />
to the head of your page and add
<script type="text/javascript" src="js/mdb.min.js"></script>
near the end of your project. Also if you have bought our Pro advanced package and you have access to the plugins also add
<link rel="stylesheet" href="plugins/css/all.min.css" />
and
<script type="text/javascript" src="plugins/js/all.min.js"></script>
Of course changing the files paths to match those on your project. And remove your link to Bootstrap files as you will use our files and not those from Bootstrap
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
I see that you have properly linked our CSS file mdb.min.css but you have used Bootstrap's JS. If you change this to our JS mdb.min.js, everything should work fine.
Keep coding,
Dawid
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.8.1
- Device: desktop
- Browser: Chrome/Brave/Safari
- OS: os x
- Provided sample code: No
- Provided link: Yes