- This topic has 15 replies, 3 voices, and was last updated 5 years, 6 months ago by
.
-
Posts
-
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!
Customer Support
Hi there,
you can use a Block Element with the
generate_after_headerhook: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!
Customer Support
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 withposition: 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!
- You must be logged in to reply to this topic.
