[Resolved] Floating Contact Button after Page-Hero

[Benny]

Hey there, i wanted to know if its possible to show a floating (fixed) Call-to-Action Button after the Page-Hero. This is my website –> https://fragbenny.de/

Thank you in advance!

[David]

Hi there,

you can use a Block Element with the generate_after_header hook:

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

[Benny]

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!

[Leo]

Is the button added currently?

I’m not seeing anything after the page hero.

[Benny]

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

[Leo]

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?

[Benny]

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

[Leo]

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.

[Benny]

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

[Leo]

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/

[Benny]

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).

[Leo]

Actually just try this CSS with your current layout:

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

[Benny]

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.

[Benny]

Will try!

Thanks Leo

[Benny]

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

[Author]

Posts