Archived topic

Sticky Button on Mobile

5 replies · Started by Eric on September 19, 2022

Viewing posts 1–6 of 6

September 19, 2022 at 11:35 pm #2348106

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!

September 19, 2022 at 11:54 pm #2348119

Hi Eric,

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

September 20, 2022 at 8:55 am #2348641

Hi Fernando,

Yes, correct.

Thanks

September 20, 2022 at 4:13 pm #2348963

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

October 13, 2022 at 11:35 am #2372685

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

October 14, 2022 at 11:05 am #2373818

You are welcome :)

This archived topic is closed to new replies.

Start building better websites today.