Why Bootstrap 4.5 navbar when small icon is shown does not show menu items

Hello,
In my Bootstrap 4.5 / jquery 3.3 / alpinejs 2 app I want to make navbar
I got piece of code from


<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="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown link
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <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>

I modified first line and changed navbar-expand-md :
<nav class="navbar navbar-expand-md navbar-light bg-light">
as I need on medioum device to show menu and on small menu to show icon.
It is as I need by clicking on menu icon an small device I need
menu items open, but I do not have it.

Have I to add some JS code?

I still use jquery 3.3, but I move into alpinejs, so please alpinejs decision if posiible…

Thanks!

I just copied your code into a codepen with all the bootstrap files set up in the settings and it seems to work out of the box.

You need the bootstrap css, bootstrap js and jquery for bootstrap to work.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.