<header class="menu fixed-menu">
    <div class="container-menu">
        <div class="col-logo">
            <a class="" href="#" rel="lightbox" data-lightbox-type="iframe" style="color:white" ;="">
                <img id="idLogo" src="<?php echo $CONST_PATH_IMG; ?>logo-grande.png" alt="">
            </a>
        </div>

        <div class="col-menu">
            <ul id="" class="">
                <li id="" class="">
                    <a href="#nav-inicio">
                        Inicio
                    </a>
                </li>
                <li class="" id="">
                    <a href="#nav-tour">
                        Tour
                    </a>
                </li>
                <li id="" class="">
                    <a href="#nav-noticias">
                        Noticias
                    </a>
                </li>
                <li id="" class="">
                    <a href="#nav-musica">
                        Musica
                    </a>
                </li>
                <li id="" class="">
                    <a href="#nav-bio">
                        Bio
                    </a>
                </li>
                <li id="" class="">
                    <a href="#nav-videos">
                        Videos
                    </a>
                </li>
                <li id="" class="">
                    <a href="#nav-contacto">
                        Contacto
                    </a>
                </li>

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

    </div>
</header>


<div style="display: none;" class="menu-mobile" id="menuMobile">
    <div class="menuMob">
        <ul id="" class="">
            <li id="" class="">
                <a href="#nav-inicio">
                    Inicio
                </a>
            </li>
            <li id="" class="">
                <a href="#nav-tour">
                    Tour
                </a>
            </li>
            <li id="" class="">
                <a href="#nav-noticias">
                    Noticias
                </a>
            </li>
            <li id="" class="">
                <a href="#nav-musica">
                    Musica
                </a>
            </li>
            <li id="" class="">
                <a href="#nav-bio">
                    Bio
                </a>
            </li>
            <li id="" class="">
                <a href="#nav-videos">
                    Videos
                </a>
            </li>
            <li id="" class="">
                <a href="#nav-contacto">
                    Contacto
                </a>
            </li>
        </ul>

    </div>
</div>

<script>
    function mostrarMenu() {
        var x = document.getElementById("menuMobile");
        if (x.style.display === "none") {
            x.style.display = "initial";
        } else {
            x.style.display = "none";
        }
    }

    function changeCss() {
        var navElement = document.getElementById("idLogo");
        this.scrollY > 20 ? navElement.style.width = '100px' : navElement.style.width = '200px';
    }
    window.addEventListener("scroll", changeCss, false);
</script>