luhansalimena commented 4 years ago

Prerequisites

Please answer the following questions for yourself before submitting an issue.

[x] I am running the latest version
[x] I checked the documentation and found no answer
[x] I checked to make sure that this issue has not already been filed
[x] I'm reporting the issue to the correct repository (for multi-repository projects)

Expected Behavior

The navbar should collapse and show items in mobile, and the Icon should appear

Current Behavior

Navbar is not working and just disappearing

Gif showing what happens: https://imgur.com/a/acZpaqG

Failure Information (for bugs)

This bug is happening in local and on the docs website

Steps to Reproduce

Please provide detailed steps for reproducing the issue.

Use a cellphone or use Devtools to simulate smaller screens
Click on the "icon" to show the responsive menu

Context

Device: Computer
Operating System: Windows 10
Browser and Version: Chrome 79.0.3945.117

groovemen commented 4 years ago

Hello @Luhancouto,

Thank you for using our products and for your constructive feedback. We will fix this issue into the next update so until then, please use the following block of code for the navbar component.

<nav class="navbar navbar-expand-lg bg-primary navbar-absolute fixed-top text-white">
  <div class="container">
    <div class="navbar-wrapper">
      <a class="navbar-brand" href="#pablo">Navbar</a>
    </div>
    <button class="navbar-toggler" type="button" data-toggle="collapse" aria-controls="navigation-index" aria-expanded="false" aria-label="Toggle navigation">
      <span class="sr-only">Toggle navigation</span>
      <span class="navbar-toggler-icon icon-bar"></span>
      <span class="navbar-toggler-icon icon-bar"></span>
      <span class="navbar-toggler-icon icon-bar"></span>
    </button>
    <div class="collapse navbar-collapse justify-content-end">
      <ul class="navbar-nav">
      <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 disabled" href="#">Disabled</a>
      </li>
    </ul>
    </div>
  </div>
</nav>

It will work properly. Hope that information helps you. Please let us know if we can help you with anything else.

All the best, Stefan

miemengniao commented 4 years ago

I have tried the aboved code on "Material Dashboard Pro" 2.1.1, but I don't work. can you help us solve the tricky issue? Thanks.

groovemen commented 4 years ago

Hello @miemengniao,

Thank you for using our products, please check again the code from above because we have tested it on "Material Dashboard Pro" v2.1.1 and it's working:

If you encounter any difficulties, please send us your project file and we will test it and integrate the navbar.