Adding the slim navbar to a project


Topic: Adding the slim navbar to a project

monkee pro premium priority asked 3 years ago

*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&amp;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&amp;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


Dawid Wajszczuk staff answered 3 years ago

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


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