Topic: collapsable burger menu wont work_
Sylwester free asked 1 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 1 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.
Sylwester free answered 1 year 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 1 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 priority commented 11 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 11 months ago
What grade of the MDB package do you have and how are you doing your imports?
Kamila Pieńkowska staff commented 11 months ago
What grade of the MDB package do you have and how are you doing your imports?
davi priority commented 11 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.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- 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