Sticky section

How do I make the grey section (SPECIAL OFFER: £120 fourball - Jan & Feb ‘23) stick to the bottom of the header on scroll?

https://www.machgolf.com/greenfees

That's brilliant - thanks so much!

@tuanphanit looks great on mobile and most desktop browser screen sizes. Is there a way to avoid the gaps on tablet and some screen and zoom sizes?

On 3/3/2023 at 7:48 PM, NGM said:

@tuanphanit looks great on mobile and most desktop browser screen sizes. Is there a way to avoid the gaps on tablet and some screen and zoom sizes?

use this

[data-section-id="63e6637613db3f494e7aa702"] {
    position: sticky;
    position: -webkit-sticky;
    top: 70px;
    z-index: 999999;
}
/* tablet */
@media screen and (max-width:1024px) and (min-width:768px) {
[data-section-id="63fe4c0f075efc4020c6faf4"] {
    top: 82px !important;
}
}

Hello! How should I code the section to have it sticky like here in the 2nd section  https://www.studiofounded.com/ ?

Looks like 1st section is not touched, but 2nd is scrolling with the 1st one along the way.

Thanks!

On 3/6/2024 at 8:20 PM, websm said:

Hello! How should I code the section to have it sticky like here in the 2nd section  https://www.studiofounded.com/ ?

Looks like 1st section is not touched, but 2nd is scrolling with the 1st one along the way.

Thanks!

 

Try this code to Website > Website Tools > Custom CSS

[data-section-id="65d8a8c923d22574773eba43"] {
    position: sticky !important;
    position: -webkit-sticky !important;
    top: 0 !important;
}