[Resolved] Best way to achieve site-wide above header notification

[Simon]

hi !
Happy New Year.
What would be the best way to achieve a site-wide above header (like the shop notification you can switch on in woocommerce perhaps) to notify visitors about an important event. Perhaps something that stays at the top for desktop and moves on scolling down on mobile.

I created an element hook and entered html but wondered if that was the best way to do it.

Thanks for reading!

[Ying]

Hi Simon,

Yes, you can use a hook element with HTML or a block element with blocks.

You can use the generate_above_header hook.

[Simon]

Hi Ying
Thank you for your speedy reply, and sorry for my slow one.

I added sticky-header as an additional css class for the header, and this additional CSS:

.sticky-header {
position: sticky;
top: 0;
}

and that worked. But I wondered if there were a way to ensure the header overlayed any images or text upon scrolling?

Thanks!

[Fernando]

Hi Simon,

There’s a way. You need to add z-index.

Try using this code instead:

.sticky-header {
    position: sticky;
    top: 0;
    z-index: 10000;
}

[Simon]

Thank you Fernando, that’s perfect!

[Fernando]

You’re welcome, Simon!

[Author]

Posts