- This topic has 5 replies, 3 voices, and was last updated 3 years, 3 months ago by
.
-
Posts
-
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!
Customer Support
Hi Simon,
Yes, you can use a hook element with HTML or a block element with blocks.
You can use the
generate_above_headerhook.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!
Customer Support
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; }Thank you Fernando, that’s perfect!
You’re welcome, Simon!
- You must be logged in to reply to this topic.
