5
respostas

[Dúvida] Menu e barra de rolagem na vertical

Boa noite. Ao fazer as atualizações do arquivo alura play, no css, salvei e atualizei a página, mas o menu na vertical ainda continua reduzido e a barra de rolagem vertical não apareceu. Alguém pode me ajudar com este problema?

5 respostas

Boa noite, Jéssica! você poderia mandar o código para ter um entendimento melhor sobre seu problema? Por favor

Segue o arquivo css

/CABECALHO/

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

/MENU/

.menu__container { position: fixed; bottom: 0%; height: 74px; width: 100%; }

.menu__lista { display: flex; justify-content: space-around; height:100%; }

.menu__lista li { align-self: center; }

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

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

/SUPERIOR SEÇÃO/

.superior__secao__container { display: flex; align-items: center; white-space: nowrap; overflow: scroll; gap: 15px; }

/RODAPE/

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

@media (min-width: 834px) {

/CABECALHO/

.cabecalho__pesquisar__item {
    display: block ;
}

/RODAPE/

.rodape__container {
    justify-content: space-between;
}

/MENU LATERAL PARA TELAS DE TABLET/

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

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

@media(min-width: 1440px) { .menu__container { width: 239px; overflow: scroll; }

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

}

.menu__lista { height: auto; padding: 20px 17px 20px 15px; gap: 15px; }

.menu__itens { flex-direction: row; gap: 15px; align-items: center; }

.menu__lista:nth-child(3) { flex-direction: column-reverse; }

.jogos { order: 3; }

.films { order: 2; }

.premium { order: 1; }

.maispagina { order: 4; } }

Bom dia, Jéssica! Tudo bem?

Então, percebi que no seu código CSS, quando você faz o ajuste para telas maiores que 1440px, o .menu__container realmente muda de largura, mas está faltando definir a altura e o overflow para que a rolagem apareça corretamente.

Tenta adicionar essas propriedades dentro do @media (min-width: 1440px):

.menu__container {
    width: 239px; 
    height: calc(100vh - 80px); 
    top: 80px; 
    overflow-y: auto;
    position: fixed;
}

Além disso, verifica se essas listas dentro do menu estão visíveis quando chega na largura de 1440px:

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

Espero ter ajudado, qualquer problema que der pode mandar mensagem aqui de novo.

Agradecida.

De nada.