Bootstrap css navbar not showing fully on mobile

I am trying to make my navbar fully show on mobile, currently it only shows the "navbar-brand" item. Here is my code:

<nav class="navbar navbar-expand-lg" style="background-color: #757070; ">
    <div class="container-fluid">
      <a class="navbar-brand" style="color: #ffff; font-size: xx-large; font-family: Inter;" href="index.html">Metal Arte</a>
      <div class="collapse navbar-collapse" id="navbarNavDropdown">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link " style="color: #ffff ; font-size: x-large; font-family: inter;"
             href="historia.html">Nossa história</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" style="color: #ffff ; font-size: x-large; font-family: inter;" 
            href="#">Conheça nossos serviços</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" style="color: #ffff ; font-size: x-large; font-family: inter;"
             href="contato.html">Entre em Contato</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>