Navbar Shows Icon on Mobile But Menu Doesn't Open

Wappler General Need Help
1

I have a navbar on my project that correctly displays the hamburger icon on mobile but clicking on it does nothing.

DOes anyone see anything wrong with this code?

<nav class="navbar navbar-expand-lg navbar-light justify-content-end bg-success">
<div class="container-fluid">
<a class="navbar-brand ms-auto text-light" href="./"><i class="fa fa-lock"></i>&nbsp; Kopar Client Gateway</a>
<button class="navbar-toggler" type="button" aria-controls="navbar1_collapse" aria-expanded="false" aria-label="Toggle navigation" data-bs-toggle="collapse" data-bs-target="#navbar1_collapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbar1_collapse">
<div class="navbar-nav">
<a class="nav-item nav-link active text-light" href="./"><i class="fa fa-tachometer"></i> Home</a>
<a class="nav-item nav-link text-light" href="../jobboard"><i class="fa fa-th-list"></i>&nbsp; Job Board</a>
<a class="nav-item nav-link text-light" href="/workshops"><i class="fa fa-bar-chart"></i>&nbsp; Workshops</a>
</div>
</div>
</div>
</nav>
2

The code is from bootstrap 5.
Are you loading bs 5 on your project?

3

Hmmm, this project is still on BS 4. No idea how BS5 code got on there? Maybe I need to rebuild it? Or is there some simple code that I can change?

Thank you.

4

If I'm not wrong, data-bs is new, not present on bs4..

Can you test this one from bs4 docs?

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <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 dropdown">
        <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-expanded="false">
          Dropdown link
        </a>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
    </ul>
  </div>
</nav>
1 Like
5

Thank you, that seems to work. I will try and maybe rebuild the nav using this code. Again, much appreciated.

1 Like
6

I'm glad it worked out!
What about creating that on Wappler with BS4? Still inserting bs5 code like data-bs?