[Resolved] Sticky Button on Mobile

[Eric]

Hey there GP team,

I’m trying to get a sticky button on mobile to stop once it reaches it’s normal position when not sticky.

This CSS has the effect I’m going for where it stops sticking once it reaches it’s non-sticky position when scrolling, but the issue is, I just want the button to be sticky, not the entire container. I can’t seem to figure out the correct selector.

@media (max-width: 769px) {
    div:nth-child(2)  {
    position: -webkit-sticky;
    position: sticky;
    bottom:0;
    }
 }

The CSS does what I want with the button only being sticky, but using position:fixed rather than position: sticky; it stays stuck and bypasses where I want it to stop.

@media (max-width: 769px) {
        .mobile-ribbon {
        display: flex;
        position: fixed;
        bottom: 10px;
        }
    }

I’m trying to tinker with different combinations of the CSS to get it to worked but can’t figure it out.

Are you able to take a look and point me in the right direction?

I’ve provided a link to the page I’m working on in the notes.

Thanks!

[Fernando]

Hi Eric,

To clarify, you just want the Check Availability button itself to be sticky and not the entire container?

[Eric]

Hi Fernando,

Yes, correct.

Thanks

[Ying]

Hi Eric,

I don’t see a way based on the current HTML structure.

You might have a shot if you can add that section to the main content area.

If you’d like to give it a try, follow these steps:

1. Go to appearance > elements, create a new block element.

2. In the block element, add the headline block (Your dream surf trip starts here.), the check availability button and the Questions? Get in touch text. In the sidebar, you wrapped the above content using a container block, do NOT wrap them in this element.

3. Choose after_main_content hook, and choose location according to your need.

Once it’s done, try add this CSS:

.site-main + p + div.ff_form_modal {
    position: sticky;
    bottom: 0;
}

.site-main ~ * {
    text-align: center;
}
@media (min-width: 769px) {
.site-main ~ * {
    display:none;
}
}

[Eric]

Hi Ying, thanks for the support, I’m working on a couple of possible solutions and this is great.

I should be able to handle it from here.

Thanks again

[Ying]

You are welcome 🙂

[Author]

Posts