Intentamos usar su función de “aviso global”. Sin embargo, desafortunadamente, cuando se desplaza, desaparece. Por lo tanto, nos gustaría que fuera fijo. Esto, a su vez, no es factible mediante CSS personalizado, ya que position:sticky solo se puede aplicar a un elemento y ya hay un elemento fijo: el encabezado.
¿Podría hacer que sea configurable dónde se coloca el aviso en el DOM para que podamos colocarlo también en el contenedor del encabezado y hacerlo fijo?
¿Por qué no usas un banner?:
Gracias por la recomendación, pero eso no resuelve el problema descrito anteriormente: el aviso global no es fijo y tampoco lo es el banner versátil. Como describí más adelante, esto no sería posible lograrlo solo con CSS, ya que el banner versátil utiliza el mismo lugar en el DOM que el aviso global, que está fuera del contenedor de encabezado fijo.
Buen punto.
Otra opción es el plugin Layouts, que añade barras laterales que pueden ser fijas. También hay un widget HTML personalizado para él que puedes usar para añadir cualquier contenido que desees.
Si aplicas sticky al contenedor padre funcionará… aunque, si hay otras alertas en este contenedor, también se quedarán fijas (como la alerta “¿Quieres notificaciones en tiempo real cuando la gente responda a tus publicaciones?”).
Tenemos una propiedad CSS que compensará correctamente la parte superior desde la cabecera:
#main-container.container {
position: sticky;
top: var(--header-offset);
z-index: 9;
}