Hide a menu in Bootstrap 4

0

I have a menu made with bootstrap 4 using navbar and dropdown , until here everything works fine.

The menu code is as follows:

<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>

I use the following code css for the menu:

    @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;
        }
    }

Now, I need to be able to hide the entire menu when a specific user loguee and this is my doubt, there is some property of Bootstrap 4 , css or another way that can help me hide the menu in your whole?

I appreciate any help or guidance in advance.

    
asked by Henry Avery 16.11.2018 в 20:31
source

0 answers