0

Estoy trabajando con WordPress y utilizando GeneratePress.

Por defecto, este tema no incorpora el header como fixed, por lo que lo he añadido yo de la siguiente forma en mi archivo de estilos de mi tema.

.custom-fixed-header {
      position: fixed;
      top: 0;
      width: 100%;
      z-index: 2000;
}

.custom-fixed-header + * {
      padding-top: 120px;
}

Vale, ahora ya tengo mi posicionamiento fixed en mi header.

Ahora lo que estoy intentando hacer es crear un banner encima de este header, también con posicionamiento fixed. Lo he hecho de la siguiente manera:

HTML:

<div id="parent">
    <a href="" onclick="Calendly.initPopupWidget({url: 'https://google.es'});return false;">
        <button id="button-fixed-bar">
            <span class="fas fa-handshake"></span>Solicita haciendo click aquí ahora tu <bold>consulta online</bold> - te asesoramos sin compromiso
        </button>
    </a>
</div>

CSS:

#parent {
            overflow: hidden;
            display: inline;
            width: 100%;
            position: fixed;
            z-index: 9999999999999999999999999999;
            top: 0;
        }
        #parent span {
            padding-right: 10px;
        }
        #button-fixed-bar {
            width: 100%;
            height: 5%;
            background: #ffa803;
            text-align: center;
            font-family: 'Montserrat', 'Serif';
        }
        #button-fixed-bar:hover {
            background: white;
            color: #ffa803;
        }

Esto funciona y tengo ambos elementos fixed, lo que pasa es que se superponen tal y como se ve en las siguientes imágenes.

Header sin banner:

introducir la descripción de la imagen aquí

Header con banner: introducir la descripción de la imagen aquí

Como veis, el header está por debajo del banner y eso es porque el banner tiene un z-index muy alto; sí, lo sé, ¿pero cómo puedo hacer para que me quede primero el banner y luego el header pero ambos fixed?

Por lo que sé, la propiedad fixed se desvincula de todo elemento, es como que va por libre, pero entonces... ¿qué propiedad debería de utilizar para conseguir lo que quiero?

Alguien puede echarme una mano, la verdad estoy un poco perdido ya...

1
  • al imprimir el banner agrega una clase al body que indique que el banner está visible, luego si el banner está visible ( body con class .haybanner ) al header le modificas el top o le agregas margen, al cerrar el banner quitas la clase del body y el header vuelve a su lugar el 22 abr. 2021 a las 12:11

1 respuesta 1

0

lo que tienes que hacer es muy sencillo, solo tienes que poder el div del banner antes del div de la barra de navegación. Y eso es todo te quedara el banner antes que la barra de navegación

1
  • Hola! He intentado poner el div fuera de todo div y sigue apareciendo lo mismo. ¿Sabrías decirme en qué lugar debería de ponerlo en el tema de Generate Press Gratis? También, me acabo de dar cuenta de que el header, al ser fixed, tapa contenido de la página en versión mobile. Quiero que ocupe el mismo espacio y todo, lo único que cuando haga scroll, se quede fijo. Gracias por la ayuda! el 22 abr. 2021 a las 14:00

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.