Topic: collapsable burger menu wont work_

Sylwester free asked 8 months ago


*Expected behavior*on shrunk size menu should open

*Actual behavior*wont open burger menu

Resources (screenshots, code snippets etc.)

from training material: https://mdbootstrap.com/learn/mdb-foundations/bootstrap/navbar/

had same problem widt carousel - it wont swivel

used Visual Studio Code


Kamila Pieńkowska staff answered 8 months ago


It looks like you have a problem with your local files, probably imports.

You seem to have a problem with features that rely on JS, which means you probably did not add it properly to your project.

Try creating a new project (to check if you did not miss any step or you did not make typo in file paths) from this lesson: https://mdbootstrap.com/learn/mdb-foundations/basics/quick-start/

Check if the carousel, navbar, or dropdowns work there.


Sylwester free commented 8 months ago

you were right, js path was wrong...


Sylwester free answered 8 months ago


Hi it occurs locally o na project, code copied from MDB tutorial https://mdbootstrap.com/learn/mdb-foundations/bootstrap/navbar/

with slight amend mends, even code with no modifications work, however, demo code works fine... same with carousel, it didn't slide

since I cannot place snippets as account id below 7 days, please see my code below:

<!-- Navbar -->
<nav  style="z-index: 10;"
  class="navbar navbar-expand-md navbar-dark bg-dark">
  <!-- Container wrapper -->
  <div class="container">
    <!-- Toggle button -->
    <button class="navbar-toggler text-white" type="button" data-mdb-toggle="collapse"
      data-mdb-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
      aria-label="Toggle navigation">
      <i class="fas fa-bars"></i>
    </button>

    <!-- Collapsible wrapper -->
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <!-- Navbar brand -->
      <a class="navbar-brand mt-2 mt-lg-0" href="#">
        <i class="fab fa-jedi-order fa-2x text-info"></i>
      </a>
      <!-- Left links -->
      <ul class="navbar-nav me-auto mb-2 mb-lg-0 ">
        <li class="nav-item">
          <a class="nav-link ms-4 me-4 text-white" href="#">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link me-4 text-white" href="#">Projects</a>
        </li>
        <li class="nav-item">
          <a class="nav-link text-white" href="#">Contact</a>
        </li>
      </ul>
      <!-- Left links -->
    </div>
    <!-- Collapsible wrapper -->

    <!-- Right elements -->
    <div class="d-flex align-items-center text-white">
      <!-- Icon -->
      <a class="text-reset me-4" href="#">
        <i class="fab fa-facebook fa-2x"></i>
      </a>
      <a class="text-reset me-4" href="#">
        <i class="fab fa-snapchat fa-2x"></i>
      </a>
      <a class="text-reset me-3" href="#">
        <i class="fab fa-instagram fa-2x"></i>
      </a>

      <!-- Right elements -->
    </div>
    <!-- Container wrapper -->
</nav>
<!-- Navbar -->


<!-- Background image -->
<div class="bg-image vh-100" 
     style="
            margin-top: -68.59px;
            background-image: url('https://mdbcdn.b-cdn.net/img/new/fluid/city/018.jpg');">
</div>


Kamila Pieńkowska staff answered 8 months ago


Does this occur on the site or locally in your project?

If locally please create a snippet that recreates that problem and I will help you troubleshoot.


davi priority commented 8 months ago

The same problem is happen here (no burger and no table), locally and on the site (User management template). There's an error shown in the Chrome console:

script.js:126 Uncaught ReferenceError: TableEditor is not defined at script.js:126:20


Kamila Pieńkowska staff commented 8 months ago

What grade of the MDB package do you have and how are you doing your imports?


Kamila Pieńkowska staff commented 8 months ago

What grade of the MDB package do you have and how are you doing your imports?


davi priority commented 8 months ago

Good morning, Kamila. I have a Standard MD5 Pro Advanced 6.4.2 Package. I was using the wrong "index.html" file, the one that comes within the snippet.zip file with css and javascript. Once I pasted the HTML template code in the main "index.html" with the correct references to custom css and script, the project worked! Thank you.



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

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Standard
  • MDB Version: MDB5 4.3.0
  • Device: Nitro 5
  • Browser: Chrome
  • OS: Win 10 Home
  • Provided sample code: No
  • Provided link: Yes