creativetimofficial / ct-paper-dashboard-pro

Paper Dashboard PRO
6 stars 2 forks source link

Collapsing nav bar assigns incorrect class to parent nav element #50

Open BonitaTerror opened 4 years ago

BonitaTerror commented 4 years ago

Hello. I believe I may have encountered a bug in paper dashboard pro v2.0.1.

I followed the simple instructions in the documentation for setting up a collapsing navigation bar. I've found that when I uncollapse the navigation bar, it assigns the bg-white class to the parent nav, though it is supposed to be bg-dark.

I have included some mobile screenshots below. You may be able to see that the navbar doesn't seem to extend to the edge of the screen when expanded. This is because of the bg-white class being added

image

image

The above is the result of the changing of the navbar class.

I've also pasted the relevant html below just to be thorough

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
            <div class="container">
              <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-default" aria-controls="navbar-default" aria-expanded="false" aria-label="Toggle navigation">
                  <span class="navbar-toggler-icon"></span>
              </button>
                <div class="collapse navbar-collapse navbar-expand-lg navbar-dark bg-dark" id="navbar-default">
                    <a class="navbar-brand" href="#">Brand</a>
                    <ul class="navbar-nav ml-lg-auto">
                        <li class="nav-item">
                            <a class="nav-link nav-link-icon" href="#">
                                <i class="fa fa-pencil"></i>
                                <span class="nav-link-inner--text">Register</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link nav-link-icon" href="#">
                                <i class="fa fa-send"></i>
                                <span class="nav-link-inner--text">Contact</span>
                            </a>
                        </li>
                        <li class="nav-item dropdown">
                            <a class="nav-link nav-link-icon" href="#" id="navbar-default_dropdown_1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <i class="fa fa-user"></i>
                                <span class="nav-link-inner--text">User</span>
                            </a>
                            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbar-default_dropdown_1">
                                <a class="dropdown-item" href="#">Login</a>
                                <a class="dropdown-item" href="#">Faucet</a>
                                <a class="dropdown-item" href="#">Account</a>
                            </div>
                        </li>
                    </ul>
                </div>
        </div>
      </nav>

Thank you for your time!