Cómo mantener fija la barra de anuncios de Squarespace al desplazarse por la página

La barra de anuncios integrada es ideal para destacar promociones, rebajas o cualquier otro aspecto sobre el que quieras llamar la atención, pero en cuanto alguien se desplaza hacia abajo por la página, desaparece.

Por eso queremos que se mantenga en un lugar destacado, para que se vea y, con suerte, aumente el número de conversiones.

Este es el CSS que utilizamos en esta página web.

.sqs-announcement-bar-dropzone {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 9999;
}
.show-on-scroll-wrapper.show {
    display: none;
}

Para implementarlo, solo tienes que copiar y pegar esto en tu CSS personalizado, que encontrarás en el menú de inicio, en la sección «Diseño».

Ten en cuenta que estamos utilizando «position: sticky» en lugar de «position: fixed». Es probable que esta última opción haga que la barra de anuncios se superponga al encabezado o a la navegación, como se ve aquí.