1
resposta

problemas na navbar

ao adicionar a propriedade fixed-top na navbar o movimento de colapsar e descolapsar não empurra as imagens para baixo, ao invés disso o menu de navegação fica por cima das imagens, no modo responsivo , o que pode ser?

<header>
        <nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
            <a class="navbar-brand fonte-titulo-nome" href="#">Guia dos Cães</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse justify-content-end" id="navbarNavAltMarkup">
                <ul class="navbar-nav">
                    <li><a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
                        <li><a class="nav-item nav-link" href="#">Sobre Nos</a></li>
                        <li><a class="nav-item nav-link" href="#">Serviços</a></li>
                        <li><a class="nav-item nav-link" href="#">Galeria</a></li>
                        <li><a class="nav-item nav-link" href="#">Video</a></li>
                        <li><a class="nav-item nav-link" href="#">contato</a></li>
                    </ul>
                </div>
            </nav>
        </header>

        <main>
            <section class="carrossel">
                <div id="carouselExampleCaptions" class="carousel slide" data-interval="3000" data-ride="carousel">
                    <ol class="carousel-indicators">
                        <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
                        <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
                        <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
                    </ol>
                    <div class="carousel-inner">
                        <div class="carousel-item active  zoom">
                            <img src="img/dogs.jpg" class="d-block w-100 imagem-carrossel p-1" alt="...">
                            <div class="carousel-caption d-none d-md-block h-50">
                                <h1 class="fonte-titulo" class="display-4">First slide label</h1>
                                <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
                            </div>
                        </div>
                        <div class="carousel-item zoom">
                            <img src="img/cachorro.jpg" class="d-block w-100 imagem-carrossel p-1" alt="...">
                            <div class="carousel-caption d-none d-md-block h-50">
                                <h1 class="fonte-titulo" class="display-4">Second slide label</h1>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                            </div>
                        </div>
                        <div class="carousel-item zoom">
                            <img src="img/caes-calmos-7.jpg" class="d-block w-100 imagem-carrossel p-1" alt="...">
                            <div class="carousel-caption d-none d-md-block h-50">
                                <h1 class="fonte-titulo" class="display-4">Third slide label</h1>
                                <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
                            </div>
                        </div>
                    </div>
                    <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                        <span class="sr-only">Previous</span>
                    </a>
                    <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        <span class="sr-only">Next</span>
                    </a>
                </div>
            </section>
1 resposta

Olá Everton, tudo bem ?

Você poderia colocar aqui no campo de respostas o código HTML e CSS completo para que eu possa visualizar melhor o que pode estar ocorrendo?

Fico no aguardo, abraços.