Olá, Renan. Como vai?

Tenta aplicar position static, e vê se resolve o problema.

Caso não resolva, compartilha o código CSS e HTML, pra eu poder testar e entender melhor por favor.

Aguardo seu retorno. :)

Olá Luan,

Não tive muito tempo pra mexer desde então. Mas, tentei com o static mas não deu funcionou. segue os códigos: https://github.com/engRenanTorres/siteKravMagaBruno

A minha solução foi colocar o menu vindo de cima. Escondendo com o top

Olá, Renan. Sem problemas! :)

Que bom que você conseguiu resolver o problema de alguma forma, descendo o menu do topo!

Eu baixei o seu código do GitHub, e fiz algumas alterações para ele vir da esquerda. Segue abaixo:

.menu-aba {
    display: flex;
    flex-direction: column;
    width: 30%;
    height: auto;
    background-color: var(--cinza-medio);
    border-radius: 0 0 20px 20px;
    position: absolute;
    left:-100vh;
    transition: 2s;
}

.menu-aba--ativo {
    transition: .25s;
    position: absolute;
    left: 0%;
    z-index: 1;
}

Consegui ajudar da maneira que você esperava? Fico aguardando seu retorno!

Surgindo mais dúvidas, é só nos informar!

Obrigado Luan,

Pela esquerda eu já estava conseguindo. A minha dúvida era saber se era possível fazer o menu vir da direita, já que meu botão de menu está do lado direito.

Eu só consegui fazer o menu vir da esquerda, ou de cima. Se eu escondo ele na direita, ele quebra o visual.

Mas, eu achei legal vindo de cima também.

Obrigado pela moral ae.

Olá, Renan! Ah certo. Fiz o menu vindo da esquerda para direita para você!

Para evitar distorcer a página, eu mudei o position para fixed.

Segue o código:

.menu-aba {
    display: flex;
    flex-direction: column;
    width: 30%;
    height: auto;
    background-color: var(--cinza-medio);
    border-radius: 0 0 20px 20px;
    position: fixed;
    right: -100vh;
    transition: 2s;
}

.menu-aba--ativo {
    transition: .25s;
    position: absolute;
    right: 0%;
    z-index: 1;
}

Eu escrevi esse artigo sobre positions, que pode ajudar também a aprimorar mais o seu código! :)

E parabéns, ele está muito bem feito!

Uma dica extra que reparei:

Você pode utilizar uma classe apenas, em vez de replicar o mesmo estilo para várias classes diferentes, assim o código fica com menos linhas e mais organizado:

            <ul class="menu-aba__links">
                <li class="menu-aba__links__conteudo menu-aba__link--itens menu-aba__link--ativa"><a href="#"></a>Início</li>
                <li class="menu-aba__links__conteudo menu-aba__link--itens"><a href="#"></a>Equipe</li>
                <li class="menu-aba__links__conteudo menu-aba__link--itens"><a href="#"></a>Galeria</li>
                <li class="menu-aba__links__conteudo menu-aba__link--itens"><a href="#"></a>Vídeos</li>
                <li class="menu-aba__links__conteudo menu-aba__link--itens"><a href="#"></a>Contato</li>
            </ul>

.menu-aba__link--itens::before{
    font-family: 'Open Sans', 'icones', sans-serif;
    content: '\e908';
}

Espero ter ajudado!

Surgindo mais dúvidas, pode contar com a gente! :)