Sticky Button on Mobile – GeneratePress

This topic has 5 replies, 3 voices, and was last updated 3 years, 6 months ago by Ying.

Viewing 6 posts - 1 through 6 (of 6 total)

Author

Posts
September 19, 2022 at 11:35 pm #2348106
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!
September 19, 2022 at 11:54 pm #2348119

Fernando
Customer Support

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

Eric

Hi Fernando,

Yes, correct.

Thanks

September 20, 2022 at 4:13 pm #2348963
Ying
Staff
Customer Support
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

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

October 14, 2022 at 11:05 am #2373818

Ying
Staff
Customer Support

You are welcome 🙂
Author

Posts

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

[Resolved] Sticky Button on Mobile

Popular Articles

[Resolved] Sticky Button on Mobile

Popular Articles

Start building better websites today.