Topic: Hamburger menu not working

Ashish Batra free asked 5 years ago


I am trying MDB for the first time. I copied the code from the Website in my NAVBAR component. Everything looks good but hamburger menu is not toggeling

Expected behavior Hamburger button in navbar not working

Actual behavior

Resources (screenshots, code snippets etc.)

<nav class="navbar fixed-top navbar-expand-lg navbar-dark pink scrolling-navbar">
  <a class="navbar-brand" href="#"><strong>Navbar</strong></a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
    aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Opinions</a>
      </li>
    </ul>
    <ul class="navbar-nav nav-flex-icons">
      <li class="nav-item">
        <a class="nav-link"><i class="fab fa-facebook-f"></i></a>
      </li>
      <li class="nav-item">
        <a class="nav-link"><i class="fab fa-twitter"></i></a>
      </li>
      <li class="nav-item">
        <a class="nav-link"><i class="fab fa-instagram"></i></a>
      </li>
    </ul>
  </div>
</nav>


Damian Gemza staff answered 5 years ago


Dear @Ashish Batra

You have copied the jQuery example instead of Angular one. MDB jQuery examples won't work in MDB Angular application.

Please use the Angular docs. You can find here navbar documentation.

Best Regards,

Damian



Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Resolved

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 7.5.4
  • Device: LAPTOP
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: No