- This topic has 19 replies, 3 voices, and was last updated 4 months, 3 weeks ago by
Ronny.
-
AuthorPosts
-
September 30, 2020 at 5:50 am #1465147
Ronny
Hi Guy’s,
I have an call to action button on a page. On mobile I would like this button to be fixed on the bottom of the page and when the users reaches the actual button on the page the button would return to normal.
An exact example of this behavior can you check out here (in mobile view): https://www.wehkamp.nl/anytime-lang-gewatteerde-jas-donkergroen-16507877/
Can you help me implement such behavior on generate press?
Thanks,
RonnySeptember 30, 2020 at 6:29 am #1465213David
StaffCustomer SupportHi there,
if its for Woocommerce then you can enable the Display add to cart panel on scroll option in Customizer > Layout > Woocommerce
https://docs.generatepress.com/article/woocommerce-overview/#single-product
If its not for Woo then share a link to your site where i can see the CTA and ill see what we can do.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/September 30, 2020 at 6:31 am #1465219Ronny
Hi david,
Thanks for the quick reply!
It’s not a woocommmerce page. I’ve added the url in the private information field.
Thanks,
RonnySeptember 30, 2020 at 6:39 am #1465230David
StaffCustomer SupportHmmm…. not sure but lets have a play.
Which button is that you want displayed at the Bottom of the screen ?Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/September 30, 2020 at 6:40 am #1465232Ronny
The second button.
September 30, 2020 at 7:13 am #1465273David
StaffCustomer SupportStill not sure on this – but willing to look closer.
Are you able to edit the HTML within those Review boxes?As i would need a CSS class added to the button eg.
mobile-action
And just before it i need an other HTML element that can be detected when scrolled into view. Something like this:<span class="found"></span>
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/September 30, 2020 at 7:20 am #1465288Ronny
hi David,
Yes i am able to edit all css and html as necessary.
Just let me know what i am supposed to edit.
Thanks,
RonnySeptember 30, 2020 at 7:49 am #1465462David
StaffCustomer SupportSo after the paragraph you would add this and include the class in your
<a>
HTML like so:<span class="found"></span> <a href="https://www.your-url-here" target="_blank" class="button mobile-action" rel="nofollow noopener noreferrer">Bekijk de laagste prijs!</a>
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/September 30, 2020 at 8:02 am #1465510Ronny
Hi David,
The span and the button class are both added.
Thanks,
RonnySeptember 30, 2020 at 8:16 am #1465543David
StaffCustomer SupportOK so lets try this.
Create a new Hook Element
Add this JS/CSS Script for the Hook Content:
<script> const found = document.querySelectorAll('.found'); observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.intersectionRatio > 0) { entry.target.classList.add('is-found'); } else { entry.target.classList.remove('is-found'); } }); }); found.forEach(find => { observer.observe(find); }); </script> <style> @media(max-width: 768px) { .found:not(.is-found) + .mobile-action { position: fixed; bottom: 0; left: 0; right: 0; } } </style>
Select the
WP_footer
hookSet the Display Rules to the posts you want this affect applied.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/September 30, 2020 at 8:28 am #1465564Ronny
Hi David,
I’ve added the hook but it does not seem to work.
September 30, 2020 at 8:31 am #1465571David
StaffCustomer SupportDoh – made a mistake in the CSS. Updated the Code above.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/September 30, 2020 at 8:36 am #1465577Ronny
Awesome! Works perfect, thanks for the a+ support.
September 30, 2020 at 8:38 am #1465583David
StaffCustomer SupportThat is rather cool – Glad its working – must remember to add this to my snippet library 🙂
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/September 30, 2020 at 12:02 pm #1465845Ronny
David,
One last question: would it make sense for performance to use wp is mobile to only use this hook on mobile devices?
Thanks,
Ronny -
AuthorPosts
- You must be logged in to reply to this topic.