0

Necesito hacer un menú de navegacion sticky (pegajoso) para usarlo en el header de mi tema wordpress. El menú tiene que desaparecer cuando bajes el scroll del raton y aparecer al subir. El problema es que cualquier imagen de mis paginas bajando o subiendo el scroll se sobreponen por encima y no se quedan por abajo.

La estructura de el archivo header.php es la siguiente:

<div class="wrapper">
         <header>
            <nav>
               <div class="menu-icon">
                  <i class="fa fa-bars fa-2x"></i>
               </div>
               <div class="logo">
                  LOGO
               </div>
               <div class="menu">
                  <ul>
                     <li><a href="#">Home</a></li>
                     <li><a href="#">página1</a></li>
                     <li><a href="#">página2</a></li>
                     <li><a href="#">página3</a></li>
                     <li><a href="#">página4</a></li>
                  </ul>
               </div>
            </nav>
         </header>

Código Jquery:

(function( $ ) {
 $(document).ready(function() {
            $(".menu-icon").on("click", function() {
                  $("nav ul").toggleClass("showing");
            });
      });

      // Scrolling Effect

      $(window).on("scroll", function() {
            if($(window).scrollTop()) {
                  $('nav').addClass('black');
            }

            else {
                  $('nav').removeClass('black');
            }
      })

})( jQuery );

alguien tiene alguna sugerencia?

2 respuestas 2

0

Podrías intentar con lo que dice Gabriel, añádele un z-index al menú sticky mayor que el que poseen los elementos que se sobreponen a él. Podrías intentar con algo como:

.menu {
  z-index: 100;
}
-1

Checa/asigna la propiedad z-index de los elementos, para que aparezca al frente el que deseas

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.