[Resolved] sticky before header hook

[Rachel]

Hello,

hope you guys doing well ;).

I have created a before header hook with the element – block feature, it replaces the primary menu.

I was wondering if I can make it sticky like the primary menu if I scroll down that the menu is visible?

I have read that you guys are working in GP on some sticky stuff, it is not urgent so if you bring something to the table like this, that would be cool otherwise do you have custom code for that?

Thank you.

All the best

[Rachel]

Oh link:
https://www.readyourbleed.com/low-progesterone/

[David]

Hi there,

today the best we can offer is to use some CSS, it won’t have any fancy transition but it will make it sticky.

1. Edit your Block element, select the Container Block.
1.1 under layout change the Tag Name to Header ( its not required for the sticky but just means the HTML is semantically correct for your custom header ).
1.2 in Advanced > Additional CSS Class(es) add: sticky-header
1.3 Add this CSS to your site:

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

You may want to consider giving the Container Block a background color, as its currently transparent…

[Rachel]

Thank you David,

I didnt know abut the header name tag. I have learnt something again with generateblocks. Could be something Leo could do a video on.

Thank you.

Best wishes

[David]

Glad to be of help

[Author]

Posts