Navbar não expande no mobile

Front-end
#1

Olá, por favor, alguém pode ajudar?
Meu navbar não expande em smartphones.
Segue o código:

<nav class="navbar navbar-expand-lg" style="background-color: #181818" data-bs-theme="dark">
    <div class="container ">
        <a routerLink="inicio" class="navbar-brand"><img width="250 " alt=" " src="assets/images/logoPreto.jpg "></a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 mr-auto">
                <li class="nav-item ">
                    <a routerLink="inicio" routerLinkActive="active " class="nav-link" aria-current="page " href="# ">Home</a>

                </li>
                <li class="nav-item ">
                    <a routerLink="eventos" routerLinkActive="active " class="nav-link " aria-current="page " href="# ">Eventos</a>

                </li>
                <li class="nav-item ">
                    <a routerLink="organizadores" routerLinkActive="active " class="nav-link " aria-current="page " href="# ">Seja um Organizador</a>

                </li>
                <li>
                    <a routerLink="/perfil" routerLinkActive="active " class="nav-link " aria-current="page " href="# ">Minhas Inscrições</a>
                </li>
                <li>
                    <a routerLink="/resultados" routerLinkActive="active " class=" nav-link " aria-current="page " href="# ">Resultados</a>
                </li>
                <li class="nav-item ">
                    <a routerLink="/contato" routerLinkActive="active " class="nav-link " aria-current="page " href="# ">Contato</a>
                </li>
            </ul>
        </div>
        <ul class="navbar-nav ">
            <li class="nav-item dropdown ">
                <div *ngIf="loginService.usuario$ | async ">
                    <button id="button-basic " class="btn btn-dark dropdown-toggle " (click)="isCollapsed=! isCollapsed " [attr.aria-expanded]="!isCollapsed " aria-controls="collapseBasic ">
            Sair
          </button>
                    <ul id="collapseBasic " [collapse]="isCollapsed " style="z-index: 99999; " class="dropdown-menu ">
                        <li><a routerLink="/perfil " class="dropdown-item " (click)="Sair() ">Sair</a></li>
                    </ul>
                </div>
                <div *ngIf="!(loginService.usuario$ | async) ">
                    <button id="button-basic " class="btn btn-light dropdown-toggle " style="border-radius: 25px; " (click)="isCollapsed=! isCollapsed " [attr.aria-expanded]="!isCollapsed " aria-controls="collapseBasic ">
            Entrar
          </button>
                </div>
            </li>
            <li class=" ">
                <a routerLink="pagamento " class="button-basic"><button type="button " class="btn btn-dark "><img width="25px " src="assets/images/carrinhobc.png " class="rounded float-start " alt="... "></button></a>
            </li>

        </ul>
    </div>
</nav>
#2

dificil saber assim, vai no jsfiddle e coloca o css + um exemplo maior desse menu. Assim facilita pra te ajudar

#3

Parece que o problema de a barra de navegação não se expandir nos smartphones pode ser causado por um erro de configuração do Bootstrap. Certifique-se de que inclui os ficheiros CSS e JavaScript do Bootstrap no seu projeto, como em penalty shoot out

Você pode fazer o seguinte:

  1. Certifique-se de que você incluiu os arquivos CSS e JavaScript do Bootstrap em seu projeto. Isso pode ser feito adicionando as seguintes linhas ao seu arquivo HTML, geralmente na seção <head>:

htmlCopy code

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.3/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  1. Certifique-se de que a versão do Bootstrap que você está usando corresponde à classe navbar-expand-lg. O navbar-expand-lg é específico para telas maiores (lg), então você pode tentar usar navbar-expand-md para permitir a expansão em telas de tamanho médio também.
  2. Verifique se você está usando a estrutura correta do Bootstrap para o botão do navbar e a div de conteúdo que deve ser recolhida. Certifique-se de que a classe data-bs-toggle="collapse" e data-bs-target="#navbarNavDropdown" estão configuradas corretamente para abrir e fechar o menu.
  3. Certifique-se de que você está usando a meta tag <meta name="viewport" content="width=device-width, initial-scale=1"> em seu <head> para garantir que seu site seja responsivo em dispositivos móveis.
1 curtida
#4

Obrigado, deu certo. Faltava configurar o jquery no lugar correto do script no angular.