[Resolved] Sticky Button

[FunkyCss]

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

[David]

Hi there,

does the button require the navigation that your example site shows?
If so its going to take custom development.

[FunkyCss]

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

[David]

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;
}

[FunkyCss]

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

[David]

Awesome – glad to hear that.

[Author]

Posts