<div class="div-test sticky-2 config-grid-menu">
    <div class="div-test container config-menu">

        <div class="div-test config-menu-item">
            <a class="logo-grande" href="<?php echo $MENU_LOGO_URL; ?>" rel="lightbox" data-lightbox-type="iframe" style="color:white" ;="">
                <img id="idLogo" src="<?php echo $CONST_PATH_IMG . '/' . $MENU_LOGO_URL_IMG; ?>" alt="">
            </a>

        </div>

        <div class="div-test config-menu-item">
            <ul id="" class="">
                <?php
                foreach ($MENU_PRINCIPAL as $valor) {
                    if($valor['activo']=='1'){
                        echo '
                            <li id="" class="' . $valor['class'] . '">
                                <a href="' . $valor['url'] . '">
                                    ' . $valor['label'] . '
                                </a>
                            </li>
                        ';
                    }
                }
                ?>

                <li id="" class="menu-menu">
                    <button onclick="mostrarMenu()">
                        <div class="menu-click">
                            Menu
                        </div>
                    </button>
                </li>
            </ul>

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




<!-- MENU MOBIL -->
<div style="display: none;" class="div-test menu-mobile" id="menuMobile">
    <div class="config-menu-mobil-item">
        <ul id="" class="">
            <?php
            foreach ($MENU_PRINCIPAL as $valor) {
                if($valor['activo']=='1'){
                    echo '
                            <li id="" class="' . $valor['class'] . '">
                                <a href="' . $valor['url'] . '">
                                    ' . $valor['label'] . '
                                </a>
                            </li>
                        ';
                    }
            }
            ?>
        </ul>
    </div>
</div>


<script>
    /* FUNCIÓN PARA MOSTRAR EL MENU MOBIL */
    function mostrarMenu() {
        var x = document.getElementById("menuMobile");
        if (x.style.display === "none") {
            x.style.display = "initial";
        } else {
            x.style.display = "none";
        }
    }


    /* FUNCIÓN PARA CAMBIAR EL LOGO CON EL SCROLL */
    function changeCss() {
        var navElement = document.getElementById("idLogo");
        this.scrollY > 20 ? navElement.style.width = '100px' : navElement.style.width = '200px';
    }
    window.addEventListener("scroll", changeCss, false);


    /* FUNCIÓN PARA OCULTAR EL MENU MOBIL EN RESOLUCION MAYOR A 600 */
    window.addEventListener('resize', () => {
        if (window.innerWidth <= 600) { //Detect mobile 

        } else { //Detect other higher resolution screens
            var x = document.getElementById("menuMobile");            
            x.style.display = "none";            
        }
    });
</script>