Floating Contact Button after Page-Hero

Hi there,

you can use a Block Element with the generate_after_header hook:

https://docs.generatepress.com/article/block-element-overview/

Hey David, thanks for your answer. I've made a new block with the hook above but it isn't working as expected. I think i have to change it from position: fixed to sticky?
Here is the relevant CSS for the Button:

width: 70px;
height: 70px;
background-color: #fbb13c;
border-radius: 50%;
text-align: center;
display: flex;
position: fixed;
right: 2%;
bottom: 3%;
transition: all 0.1s ease-in-out;

At the end the button should be appear after the page-hero and it should be fixed to the bottom right.

Thanks for your help!

Is the button added currently?

I'm not seeing anything after the page hero.

It is. At the right bottom there is a fixed orange button.

So what is the issue currently?

I can see the button at the bottom right of the page hero and it seems work quite good?

I wanted it to be over the content area and footer but not hovering over the page-hero.

So basically you want it to appear after the user starts to scroll down the page?

I'm not aware of a method to do that without a custom solution unfortunately.

Yes, exactly. Maybe if the button is in the content area and with position:sticky?

That case you can try the generate_inside_container hook and see if you can make it work with position: sticky:
https://docs.generatepress.com/article/hooks-visual-guide/

I've tried it with z-index: -1; but then it's half under the content area but not shown under the page-hero (which would be perfect without the other problem).

Actually just try this CSS with your current layout:

.page-hero {
    position: relative;
    z-index: 1;
}

Leo, i've tried this already but it wasnt working. I stuck next under the page-hero and moved a bit but not as expected.

Will try!

Thanks Leo

Works perfect Leo. This is what i was looking for!