Скрыть меню в Bootstrap 4

Question

У меня есть вопрос, который я хотел бы решить или получить альтернативы.

У меня есть меню, сделанное из bootstrap 4 с использованием navbar и dropdown, здесь все в порядке.

Код следующий:

<nav class="navbar navbar-expand-lg navbar-dark bg-dark navbar-static" role="navigation">
    <a class="navbar-brand" href="#">Menu</a>
     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#menu" aria-controls="menu"
        aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
     </button>
 <div class="collapse navbar-collapse" id="menu">
 <ul class="navbar-nav">

            <li class="nav-item dropdown has-mega-menu active">
                <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
                    Gestión
                </a>

                <div class="dropdown-menu">
                    <div class="px-0 container container-md">
                        <div class="row">
                            <div class="col-sm-6 col-md-x">

                                    <a class="dropdown-header">Tramitar</a>
                                    <a class="dropdown-item" href="#">Tramitar</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-header">Escritos</a>
                                    <a class="dropdown-item" href="#">Ingresar Escritos</a>
                                    <a class="dropdown-item" href="#">Consultar Escritos</a>

                            </div>
                            <div class="col-sm-6 col-md-x">

                                    <a class="dropdown-header">Plazos</a>
                                    <a class="dropdown-item" href="#">Búsqueda de Plazos</a>
                                    <a class="dropdown-item" href="#">Abandono de Procedimiento Masivo</a>
                                    <a class="dropdown-item" href="#">Causas Sin Movimiento (6 Meses)</a>

                            </div>
                        </div>
                    </div>
                </div>

            </li>

            <li class="nav-item dropdown has-mega-menu active">
                <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
                    Adm. General
                </a>

                <div class="dropdown-menu">
                    <div class="px-0 container container-md">
                        <div class="row">
                            <div class="col-sm-6 col-md-x">

                                    <a class="dropdown-header">Notificación</a>
                                    <a class="dropdown-item" href="#">Notificación</a>
                                    <a class="dropdown-item" href="#">Centro de Notificación</a>
                                    <a class="dropdown-item" href="#">Notificación Receptor</a>
                                    <a class="dropdown-item" href="#">Notificación por Email</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-header">Receptor</a>
                                    <a class="dropdown-item" href="#">Retiros</a>

                            </div>
                            <div class="col-sm-6 col-md-x">

                                    <a class="dropdown-header">Archivo</a>
                                    <a class="dropdown-item" href="#">Administración de Archivos</a>
                                    <a class="dropdown-item" href="#">Consultar Archivo</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-header">Recordatorio SMS</a>
                                    <a class="dropdown-item" href="#">Recordatorio SMS</a>

                            </div>
                        </div>
                    </div>
                </div>

            </li>

            <li class="nav-item dropdown has-mega-menu active">
                <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
                    Atención Público
                </a>

                <div class="dropdown-menu">
                    <div class="px-0 container container-xs">
                        <div class="row">
                            <div class="col-sm-12 col-md-x">

                                    <a class="dropdown-header">Consulta de Causas</a>
                                    <a class="dropdown-item" href="#">Consulta de Causas</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-header">Consulta de Audiencias</a>
                                    <a class="dropdown-item" href="#">Consulta de Audiencias</a>

                            </div>
                        </div>
                    </div>
                </div>

            </li>


            <li class="nav-item dropdown has-mega-menu active">
                <a class="nav-link" href="#" role="button">
                    Cerrar Sesión
                </a>

            </li>

        </ul>
    </div>
</nav>  

Код css, который я использую для меню, следующий:

    @media screen and (min-width: 576px) {
         .has-mega-menu .container-sm {
            width: 540px;
         }

        .dropdown-header {
            color: #428bca;
            font-size: 18px;
        }
    }

    @media screen and (min-width: 768px) {
        .has-mega-menu .container-md {
            width: 720px;
        }

        .dropdown-header {
            color: #428bca;
            font-size: 18px;
        }
    }

    @media screen and (min-width: 992px) {
        .has-mega-menu .container-lg {
            width: 960px;
        }

        .dropdown-header {
            color: #428bca;
            font-size: 18px;
        }
    }

    @media screen and (min-width: 1200px) {
        .has-mega-menu .container-xl {
            width: 1140px;
        }

        .dropdown-header {
            color: #428bca;
            font-size: 18px;
        }
    }

Мне нужно скрыть все меню при подключении определенного пользователя, но я не знаю, есть ли какое-либо свойство bootstrap, css или другого, которое позволяет мне полностью скрыть меню.

Я ценю любую помощь или руководство, чтобы скрыть меню.