title: Hide a menu in Bootstrap 4
body: <p>I have a question that I would like to solve or obtain alternatives.</p>
  
  <p>I have a menu made with <code>bootstrap 4</code> using <code>navbar</code> and <code>dropdown</code>, up here all right.</p>
  
  <p>The code is the following:</p>
  
  <pre><code>&lt;nav class="navbar navbar-expand-lg navbar-dark bg-dark navbar-static" role="navigation"&gt;
      &lt;a class="navbar-brand" href="#"&gt;Menu&lt;/a&gt;
       &lt;button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#menu" aria-controls="menu"
          aria-expanded="false" aria-label="Toggle navigation"&gt;
              &lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;
       &lt;/button&gt;
   &lt;div class="collapse navbar-collapse" id="menu"&gt;
   &lt;ul class="navbar-nav"&gt;
  
              &lt;li class="nav-item dropdown has-mega-menu active"&gt;
                  &lt;a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"&gt;
                      Gestión
                  &lt;/a&gt;
  
                  &lt;div class="dropdown-menu"&gt;
                      &lt;div class="px-0 container container-md"&gt;
                          &lt;div class="row"&gt;
                              &lt;div class="col-sm-6 col-md-x"&gt;
  
                                      &lt;a class="dropdown-header"&gt;Tramitar&lt;/a&gt;
                                      &lt;a class="dropdown-item" href="#"&gt;Tramitar&lt;/a&gt;
                                      &lt;div class="dropdown-divider"&gt;&lt;/div&gt;
                                      &lt;a class="dropdown-header"&gt;Escritos&lt;/a&gt;
                                      &lt;a class="dropdown-item" href="#"&gt;Ingresar Escritos&lt;/a&gt;
                                      &lt;a class="dropdown-item" href="#"&gt;Consultar Escritos&lt;/a&gt;
  
                              &lt;/div&gt;
                              &lt;div class="col-sm-6 col-md-x"&gt;
  
                                      &lt;a class="dropdown-header"&gt;Plazos&lt;/a&gt;
                                      &lt;a class="dropdown-item" href="#"&gt;Búsqueda de Plazos&lt;/a&gt;
                                      &lt;a class="dropdown-item" href="#"&gt;Abandono de Procedimiento Masivo&lt;/a&gt;
                                      &lt;a class="dropdown-item" href="#"&gt;Causas Sin Movimiento (6 Meses)&lt;/a&gt;
  
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
              &lt;/li&gt;
  
              &lt;li class="nav-item dropdown has-mega-menu active"&gt;
                  &lt;a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"&gt;
                      Adm. General
                  &lt;/a&gt;
  
                  &lt;div class="dropdown-menu"&gt;
                      &lt;div class="px-0 container container-md"&gt;
                          &lt;div class="row"&gt;
                              &lt;div class="col-sm-6 col-md-x"&gt;
  
                                      &lt;a class="dropdown-header"&gt;Notificación&lt;/a&gt;
                                      &lt;a class="dropdown-item" href="#"&gt;Notificación&lt;/a&gt;
                                      &lt;a class="dropdown-item" href="#"&gt;Centro de Notificación&lt;/a&gt;
                                      &lt;a class="dropdown-item" href="#"&gt;Notificación Receptor&lt;/a&gt;
                                      &lt;a class="dropdown-item" href="#"&gt;Notificación por Email&lt;/a&gt;
                                      &lt;div class="dropdown-divider"&gt;&lt;/div&gt;
                                      &lt;a class="dropdown-header"&gt;Receptor&lt;/a&gt;
                                      &lt;a class="dropdown-item" href="#"&gt;Retiros&lt;/a&gt;
  
                              &lt;/div&gt;
                              &lt;div class="col-sm-6 col-md-x"&gt;
  
                                      &lt;a class="dropdown-header"&gt;Archivo&lt;/a&gt;
                                      &lt;a class="dropdown-item" href="#"&gt;Administración de Archivos&lt;/a&gt;
                                      &lt;a class="dropdown-item" href="#"&gt;Consultar Archivo&lt;/a&gt;
                                      &lt;div class="dropdown-divider"&gt;&lt;/div&gt;
                                      &lt;a class="dropdown-header"&gt;Recordatorio SMS&lt;/a&gt;
                                      &lt;a class="dropdown-item" href="#"&gt;Recordatorio SMS&lt;/a&gt;
  
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
              &lt;/li&gt;
  
              &lt;li class="nav-item dropdown has-mega-menu active"&gt;
                  &lt;a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"&gt;
                      Atención Público
                  &lt;/a&gt;
  
                  &lt;div class="dropdown-menu"&gt;
                      &lt;div class="px-0 container container-xs"&gt;
                          &lt;div class="row"&gt;
                              &lt;div class="col-sm-12 col-md-x"&gt;
  
                                      &lt;a class="dropdown-header"&gt;Consulta de Causas&lt;/a&gt;
                                      &lt;a class="dropdown-item" href="#"&gt;Consulta de Causas&lt;/a&gt;
                                      &lt;div class="dropdown-divider"&gt;&lt;/div&gt;
                                      &lt;a class="dropdown-header"&gt;Consulta de Audiencias&lt;/a&gt;
                                      &lt;a class="dropdown-item" href="#"&gt;Consulta de Audiencias&lt;/a&gt;
  
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
              &lt;/li&gt;
  
  
              &lt;li class="nav-item dropdown has-mega-menu active"&gt;
                  &lt;a class="nav-link" href="#" role="button"&gt;
                      Cerrar Sesión
                  &lt;/a&gt;
  
              &lt;/li&gt;
  
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/nav&gt;  
  </code></pre>
  
  <p>The <code>css</code> code that I use for the menu is the following:</p>
  
  <pre><code>    @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;
          }
      }
  </code></pre>
  
  <p>I need to hide the entire menu when a specific user connects, but I do not know if there is any property of bootstrap, css or other, that allows me to hide the menu completely.</p>
  
  <p>I appreciate any help or guidance to achieve hide the menu.</p>