Floating button or popup button options

Hi there,

Are you using the sticky navigation option?

If not we might be able to make that work.

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

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

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

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

Nice - looks good :)
Glad to be of help