collapsable burger menu wont work_


Topic: collapsable burger menu wont work_

Gorzelanczyk asked a year 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 a year 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 pro premium priority commented a year 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 a year ago

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


Kamila Pieńkowska staff commented a year ago

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


davi pro premium priority commented a year 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.


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 a year 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.


Gorzelanczyk commented a year ago

you were right, js path was wrong...


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