Pretende alterar o comportamento padrão da barra de navegação do Bootstrap 4? Bem, você está no lugar certo. O menu padrão para celular é um hamburger menu, que, quando clicado, deslizará para os itens.

Existem várias maneiras de fazer isso usando jQuery / JavaScript, mas a melhor maneira, na minha opinião, é usar apenas CSS à moda antiga.

Para fazer isso, podemos substituir os estilos de transição para o navbar-collapse da seguinte maneira:

Navegação móvel – Deslizar da esquerda

@media (max-width: 768px) {
    .navbar-collapse {
        position: absolute;
        top: 54px;
        left: 0;
        padding-left: 15px;
        padding-right: 15px;
        padding-bottom: 15px;
        width: 100%;
    }
    .navbar-collapse.collapsing {
        height: auto;
        -webkit-transition: left 0.3s ease;
        -o-transition: left 0.3s ease;
        -moz-transition: left 0.3s ease;
        transition: left 0.3s ease;
        left: -100%;
    }
    .navbar-collapse.show {
        left: 0;
        -webkit-transition: left 0.3s ease-in;
        -o-transition: left 0.3s ease-in;
        -moz-transition: left 0.3s ease-in;
        transition: left 0.3s ease-in;
    }
}

Navegação móvel – Deslizar da direita

@media (max-width: 992px) {
    .navbar-collapse {
        position: absolute;
        top: 54px;
        right: 100%;
        padding-left: 15px;
        padding-right: 15px;
        padding-bottom: 15px;
        width: 100%;
        transition: all 0.3s ease;
        display: block;
    }
    .navbar-collapse.collapsing {
        height: auto !important;
        margin-right: 50%;
        transition: all 0.3s ease;
        display: block;
    }
    .navbar-collapse.show {
        right: 0;
    }
}

Espero que este tutorial rápido o tenha ajudado. Se precisar de mais assistência, deixe um comentário abaixo.