How to fix columns on top of a fixed image background

I am trying to fix or stick some columns on a fixed background, but cannot figure out how to do it. I am using the Beaver Builder page builder. If you look at the page here: https://thegoodlist.co.nz/ The 4th row down containing the "TEST COLUMN 1" Us there any way I can fix those two columns so they stay fixed in position on top of the fixed background? I want the content above and below to scroll over it as it does now.

Thanks!

1 answer

  • answered 2021-11-23 02:27 Authentic Science

    You could apply

    position: sticky;
    top: 100px;
    

    to class fl-row-content fl-row-fixed-width fl-node-content

    but it would only stick until the next section forced it to scroll with the rest of the content.

    The other thing you could do is apply to the same class

    position: fixed;
    top: 100px;
    z-index: 0;
    

    but in order to get the other sections to scroll overtop, you would need to apply something like

    z-index: 200;
    

    to each wrapper so they would cover as they scroll.

How many English words
do you know?
Test your English vocabulary size, and measure
how many words do you know
Online Test
Powered by Examplum