- This topic has 6 replies, 3 voices, and was last updated 6 months, 2 weeks ago by
David.
-
AuthorPosts
-
July 4, 2020 at 2:04 pm #1352092
nomadiceman
Hi guys,
How can I get a button to pop up or slide in on my single posts?
The link attached has a fading in button at the top of the page
What is the optimum way to achieve this? My site is getting 95% in pagespeedinsights and i dont want to ruin that
Basically I am looking for a button that’s on the post pages so that the reader can click to be taken to another page, very simple
Any ideas?
July 4, 2020 at 9:27 pm #1352275Leo
StaffCustomer SupportHi there,
Are you using the sticky navigation option?
If not we might be able to make that work.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/July 4, 2020 at 9:30 pm #1352278nomadiceman
Hi Leo,
Im not using the sticky navigation or the secondary navigation option in gp pro
I was thinking about the sticky nav but not sure how to implement it
July 5, 2020 at 12:41 am #1352381David
StaffCustomer SupportHi there,
it requires some custom development.
This will get you started.1. Create a new Hook Element
2. Add this to the hook conent:<div id="sticky-bar" class="sticky-top-bar"> <div class="grid-container"> <a class="button" href="#">Sticky Bar Button</a> </div> </div> <script> var scrollPosition = window.scrollY; var stickyBar = document.getElementById('sticky-bar'); window.addEventListener('scroll', function() { scrollPosition = window.scrollY; if (scrollPosition >= 200) { stickyBar.classList.add('bar_stuck'); } else { stickyBar.classList.remove('bar_stuck'); } }); </script>
3. Select the
after_footer
hook
4. Set your Display Rules
5. Publish the hook and add this CSS to your site:.sticky-top-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; pointer-events: none; opacity: 0; transition: opacity 0.3s ease-in-out; background-color: #ccc; padding: 5px; } .sticky-top-bar.bar_stuck { opacity: 1; pointer-events: auto; } .sticky-top-bar .grid-container { text-align: center; } .admin-bar .sticky-top-bar { margin-top: 32px; }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/July 5, 2020 at 5:41 pm #1353185nomadiceman
this worked great. There is a weird effect in chrome though. If you scroll up the page goes above the top of the page, very strange
July 5, 2020 at 6:56 pm #1353226nomadiceman
i deleted the lightweight social icons plugin and it fixed that weird scrolling effect
ive updated the website link for you to see the button in action. works and looks great
thank you again for the awesome support
July 6, 2020 at 12:10 am #1353410David
StaffCustomer SupportNice – looks good 🙂
Glad to be of helpDocumentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/ -
AuthorPosts
- You must be logged in to reply to this topic.