Hello,
https://www.innercirclewealth.ca/welcome-1
My homepage has a table about 3/4 of the way down under the scrolling title "How we measure up". I've made the 4 coloured text blocks ("robo-advisor", "inner circle", "bank advisor" & "private wealth") sticky for mobile devices or very narrow browser windows (less than 640px wide) through CSS code as follows:
/* Sticky Table Headings */
@media screen and (max-width:640px) {
/* Robo-Advisor */
.fe-block-78207b8bfa84a1b78396 {
position: sticky !important;
position: -webkit-sticky !important;
top:79px !important;
}
/* Inner Circle */
.fe-block-0cde6332ff7c6799e358 {
position: sticky !important;
position: -webkit-sticky !important;
top:79px !important;
}
/* Bank Advisor */
.fe-block-0e0f104fc27c1fe05829 {
position: sticky !important;
position: -webkit-sticky !important;
top:79px !important;
}
/* Private Wealth */
.fe-block-6e77432adcff5e52ba74 {
position: sticky !important;
position: -webkit-sticky !important;
top:79px !important;
}
However, I'm encountering this strange issue where about 50% of the time when scrolling on either my phone or desktop, my sticky boxes will slide underneath the text/background blocks below them (screenshot attached). How do I keep these sticky header text blocks floating above the items that they are scrolling over?
Thanks in advance! This community is awesome ❤️