Adding the slim navbar to a project

Topic: Adding the slim navbar to a project

monkee 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

Add comment

Dawid Wajszczuk staff answered 3 years ago

0 0 Best answer

<p>The boilerplate is in your MDB package in <code>index.html</code> file. These examples work on our page because JS and CSS files are link to our page.</p>

<p>Your issue occurs due to not having our files linked. Just simply add </p>

<p>near the end of your project. Also if you have bought our Pro advanced package and you have access to the plugins also add </p>

<p>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</p>

<p>I see that you have properly linked our CSS file <code>mdb.min.css</code> but you have used Bootstrap's JS. If you change this to our JS <code>mdb.min.js</code>, everything should work fine.</p>

<p>Keep coding, <br>
Dawid</p>

Please insert min. 20 characters.

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

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

ForumUser: Priority
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

monkee

57Support score
11Questions 1Answers 4Snippets