Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

Meu menu superior invadindo meu menu lateral na versão desktop.

Insira aqui a descrição dessa imagem para ajudar na acessibilidade Como posso está resolvendo esse problema? desde já obrigado!

4 respostas

Oii Bruno, tudo bem?

Você poderia mandar seu código completo aqui? Assim fica melhor pra te ajudar. Você pode usar a ferramenta de inserir bloco de código </>.

print da aba de opções do fórum, dando foco na opção de inserir bloco de código

Caso haja alguma dúvida de como fazer, você pode assistir esse alura+ sobre como turbinar seus estudos com o fórum.

Um abraço e bons estudos.

.cabecalho__container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top: 0;

}

.cabecalho__pesquisar__item {
    display: none;
}

/*SUPERIOR SEÇÃO*/
.superior__secao__container {
    display: flex;
    align-items: center;
    white-space: nowrap;
    gap: 15px;

}

.superior__item {
    font-size: 12px;
}

/*MENU*/
.menu__container {
    position: fixed;
    bottom: 0%;
    height: 74px;
    width: 100vw;


}

/*MENU*/
.menu__lista {
    display: flex;
    justify-content: space-around;
    font-size: 12px;
    height: 100%;
}

.menu__lista li {
    align-self: center;
}

.menu__lista:nth-child(2),
.menu__lista:nth-child(3),
.menu__lista:nth-child(4) {
    display: none;
}

.menu__itens {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/*RODAPE*/
.rodape__container {
    display: flex;
    flex-flow: column wrap;


}

@media(min-width:834px) {

    /*CABEÇALHO*/
    .cabecalho__pesquisar__item {
        display: block;
    }

    /*RODAPE*/
    .rodape__container {
        justify-content: space-between;
    }

    .menu__container {
        left: 0;
        height: auto;
        width: 74px;
        top: 80px;
    }

    .menu__lista {
        flex-direction: column;
        justify-content: flex-start;
        font-size: 12px;
        padding-top: 15px;
        gap: 33px;

    }
}

@media (min-width:1070px) {
    .menu__container {
        width: 279px;
    }

}
solução!

amigo voce precisa mandar o código completo, o HTML também! só o css não ajuda :

mas eu diria pra vc revisar o código olhando pro código pronto da aula, deve ser algo bem pequeno


 <li>
                <a class="menu__itens" href="#">
                    <i class="icone__ballerini icone-item"></i>
                    <span>Rafaella Ballerini</span></a>
            </li>

            <li>
                <a class="menu__itens" href="#">
                    <i class="icone__gaveta icone-item"></i>
                    <span>Gaveta</span></a>
            </li>

            <li>
                <a class="menu__itens" href="#">
                    <i class="icone__alura icone-item"></i>
                    <span>Alura</span></a>
            </li>

            <li>
                <a class="menu__itens inscricoes" href="#">INSCRIÇÕES</a>
            </li>
        </ul>

        <ul class="menu__lista">
            <li class="jogos">
                <a class="menu__itens" href="#">
                    <i class="icone__jogos icone-item"></i>
                    <span>Jogos</span></a>
            </li>
 </li>

            <li class="filmes">
                <a class="menu__itens" href="#">
                    <i class="icone__filmes icone-item"></i>
                    <span>Filmes</span></a>
            </li>
            <li class="premium">
                <a class="menu__itens" href="#">
                    <i class="icone__videos icone-item"></i>
                    <span>Vídeo Premium</span></a>
            </li>

            <li class="menu__itens maispagina">
                <a href="#">MAIS DA PÁGINA</a>
            </li>
        </ul>
    </aside>

    <!-- Seção superior -->

    <section class="superior__secao__container">
        <a class="superior__item" href="#">Tudo</a>
        <a class="superior__item" href="#">Debates</a>
        <a class="superior__item" href="#">Ao Vivo</a>
        <a class="superior__item" href="#">Podcasts</a>
        <a class="superior__item" href="#">Fundos de Investimento</a>
        <a class="superior__item" href="#">Desenhos</a>
        <a class="superior__item" href="#">Data Science</a>
        <a class="superior__item" href="#">Apps</a>
        <a class="superior__item" href="#">Linguagem de Programação</a>
        <a class="superior__item" href="#">Ciência da Computação</a>
        <a class="superior__item" href="#">Marketing</a>
    </section>
  • Logo do canal Alura Vídeos

    qual é o melhor hardware para programação com mario souto

    236 mil visualizações - há 8 dias

  • Logo do canal Alura Cursos Online

    Voltando ao mercado após a maternidade: Ana Silvério

    618 visualizações - Há 1 mês

  • Logo do canal Alura Cursos Online

    Mercado de Trabalho | Desmistificando Mobile...

    1,1 mil visualizações - Há 1 mês

  • Logo do canal Alura Cursos Online

    Conhecendo a linguagem Go | Hipsters.Talks

    3 mil visualizações - Há 3 meses

    ```