Jump to content

Sticky Text Blocks Issue - underlapping when scrolling issue

Go to solution Solved by Lesum,

Recommended Posts

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 ❤️

Screenshot 2023-08-30 at 10.49.07 PM.png

Edited by LDRO
added website link
Link to comment
  • Replies 2
  • Views 1.1k
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

  • Solution

@LDRO Just add this line of code into each block of code: "robo-advisor," "inner circle," "bank advisor," and "private wealth." That should do the trick!

z-index: 1000000000000 !important;

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.