Collapse nao funciona no hamburguinho | Bootstrap: criação de uma single-page responsiva

1
resposta

por Adriano Rodrigues Pires Junior

| 46.1k xp | 1 posts

Boa tarde, tudo bem ? espero que sim :)

Refiz a aula algumas vezes e não consegui fazer o hamburguinho collapsar. Reavaliei algumas vezes o codigo junto com a documentação + a video aula e mesmo assim nao vai :c

Em outra duvida do pessoal o problema era que o jquery nao estava dentro do body, mas no meu caso está, os outros collapses funcionam, só o do menu que nao...

Me ajuda :c

    <nav class="navbar navbar-default">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#collapse-navbar" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">TopCasaFina Arquitetura</a>
            </div>
            <div class="collapse navbar-collapse">
                <ul class="nav navbar-nav">
                    <li><a href="#sobre-nos">Sobre Nós</a></li>
                    <li><a href="#nossos-projetos">Nossos Projetos</a></li>
                    <li><a href="#depoimentos">Depoimentos</a></li>
                    <li><a href="#videos">Vídeo</a></li>
                    <li><a href="#contato">Contato</a></li>
                </ul>
            </div>
        </div>
    </nav>

1 resposta

por Lorena Garcia

| 6856.5k xp | 9957 posts

Alura Scuba Team Monitora

09/03/2023

Olá Adriano, tudo bem?

Desculpa a demora em retornar.

Pelo código que você compartilhou, parece que você está utilizando corretamente o atributo "data-toggle" e "data-target" para fazer o hamburguinho collapsar.

Uma possível solução para o seu problema pode ser adicionar o ID "collapse-navbar" na div que contém a lista de itens do menu, assim como está sendo feito no seu botão hamburguinho. Ficaria assim:

<div class="collapse navbar-collapse" id="collapse-navbar">
    <ul class="nav navbar-nav">
        <li><a href="#sobre-nos">Sobre Nós</a></li>
        <li><a href="#nossos-projetos">Nossos Projetos</a></li>
        <li><a href="#depoimentos">Depoimentos</a></li>
        <li><a href="#videos">Vídeo</a></li>
        <li><a href="#contato">Contato</a></li>
    </ul>
</div>

Dessa forma, quando o botão hamburguinho for clicado, a lista de itens do menu será collapsada.

Espero que essa solução te ajude! Se ainda tiver alguma dúvida, é só perguntar.

Espero ter ajudado.

Um abraço e bons estudos.