Archived topic
Sticky Button
5 replies · Started by FunkyCss on December 13, 2019
Hallo i need to create a sticky button that will be like a anchor navigation inside pages ! https://www.vichy.gr/%ce%9a%ce%b1%cf%84%ce%b7%ce%b3%ce%bf%cf%81%ce%af%ce%b5%cf%82/proionta-peripoihshs-proswpou/ps1453.aspx
There is any ideas on how to insert something like that when it start a specific container ? i have send you a link where the products are starting and i dont know what elements hook i can use
Hi there,
does the button require the navigation that your example site shows?
If so its going to take custom development.
Hey There ! Actually i have created the Button :) , i am curious if there is a hook available in GPP to insert it on this area i mean !
Have a nice day my friend
There isn't a Hook there specifically.
You use the before_content hook to place it inside the article container.
Markup and CSS for example:
<div class="floating-container">
<a href="#" class="button custom-button">Button</a>
</a>/* Stick the container */
.floating-container {
position: sticky;
position: -webkit-sticky;
top: 50%;
}
/* Absolutely postiion button to right side of container */
.custom-button {
position: absolute;
right: -80px;
}Hi David thank you for ! this hook works fine ! So i will let bellow if someone needs to make something similar .
So i have created with a hook the container in html like you said and i have add inside my custom button , that is a simple menu navigation with anchor links inside the page .
I have set the navigation " Display:None " and with some JS i show them on click !
Seems GP has no stop to do anything ! <3
Awesome - glad to hear that.
