Avada Forums Community Forum Sticky Column – is this possible?

Viewing 15 posts - 1 through 15 (of 21 total)
  • Author
    Posts
  • media_streamlinepub
    Participant
    Post count: 1

    Hi there –

    Is it possible to create a ‘sticky’ column in Avada?

    I have a page split 1/4 and 3/4 and would like the 1/4 (left) column to scroll with the user as they make their way down the page.

    Is this possible with Avada out of the box?

    Thx

    Soulkite
    Participant
    Post count: 1

    I’m looking the same information, but nobody answer in this forum.

    marklchaves
    Participant
    Post count: 873

    Hi Everyone,

    I haven’t seen this out of the box in Avada. But, it’s pretty straight forward to do with custom CSS.

    https://imgur.com/3nIikTy

    monkkeys
    Participant
    Post count: 2

    Any chance you could share an example of the coding you used to achieve this?

    marklchaves
    Participant
    Post count: 873

    Hi @monkkeys,

    Thanks for asking. I put what little code there is and some instructions on GitHub.

    Comments/improvements are welcomed.

    monkkeys
    Participant
    Post count: 2

    Thanks for the code. I found this article (https://alligator.io/css/position-sticky/) which also describes the process. I would just suggest that you add -webkit-sticky vendor prefix for it to work in Safari.

    /** Add this to your page's CSS */
    .floating-toc {
      -webkit-sticky
      position: sticky;
      top: 171px; /* Offset for the header. Adjust as needed. */
    }

    Also, if for some reason (like formatting background color) you need to have the Container settings “Set Columns to Equal Height” to yes, and then you can add this CSS class to one element in a column, but not the column itself. If you need to add more elements, I got around this by creating a global library element with a global shortcode or a widget and using the Widget Area element. I think nested columns might work as well to hide elements inside of a single element.

    marklchaves
    Participant
    Post count: 873

    Hi @monkkeys,

    Great feedback. Agreed. The webkit prefix is still needed if people are on Safari 12 or older from my understanding.

    It sounds like you’ve got a cool implementation.

    Thanks for the aligator.io reference. I tried to access it a couple of times. But, it’s hanging for me. I’ll try again later.

    Cheers!

    jfbprivate
    Participant
    Post count: 4

    Hi @marklchaves and @monkkeys,

    I’m having an issue with this solution. I know it should work but for some reason it doesn’t do anything. I’m positive my code and classes are correct.

    Could it be that it has something to do with Avada 7 and the new custom layout builder and the way it is constructed? I am using a custom layout with flex containers and am trying to make the sidebars which hold widget areas sticky. Have you tested that too?

    It’s a 3-column 25% / 50% / 25% container layout with main content in the middle and two sidebars on the left and right position respectively. I have created a class and assigned it to the columns that hold the sidebars. But it just doesn’t have any effect and I can’t figure out what’s causing it. Any ideas?

    Many thanks!

    marklchaves
    Participant
    Post count: 873

    Hi @jfbprivate,

    I can take a look at your code if you want. Any chance you can share the page?

    mark

    jfbprivate
    Participant
    Post count: 4

    @marklchaves,

    Thanks for responding.

    I have been able to fix this with the following snippet that the Avada support kindly provided:

    #boxed-wrapper {
    overflow: visible;
    }

    Since I don’t really know where the #boxed-wrapper selector comes from, what it does, and how the two are connected, I have no idea why this works. I’m eager to find out, however, and since it seems you’re familiar with the theme, I’d appreciate if you could provide some background info.

    Thank you!

    The final (specific) CSS to make it work:

    .widget-area-left {
    position: -webkit-sticky;
    position: sticky;
    top: 62px;
    }

    .widget-area-right {
    position: -webkit-sticky;
    position: sticky;
    top: 62px;
    }

    #boxed-wrapper {
    overflow: visible;
    }

    MrsBuys
    Participant
    Post count: 5

    Hi @jfbprivate,

    Thanks for sharing!! #boxed-wrapper was a win and just what I needed to make position: sticky work.

    #boxed-wrapper {
    overflow: visible;
    }

    markhof
    Participant
    Post count: 7

    Hello,

    I’m having trouble implementing this.

    Which column are you attaching the boxed-wrapper ID to?

    Are you using the columns template as opposed to defining the columns in the main content area?

    Thanks,
    Mark

    markhof
    Participant
    Post count: 7

    It looks like I have it working.

    The ID goes on the main page wrapper.

    M

    wellzi
    Participant
    Post count: 2

    I have the same desires and I would like to implement this in one of my pages. I have a header container, and then a body container with 2/3 & 1/3 column arrangement. I want the 1/3 column to be sticky whilst I scroll through pages worth of text in 2/3 on the left.

    I have implemented the following custom css:

    .floating-toc {
      -webkit-sticky
      position: sticky;
      top: 171px;
    }
    
    #boxed-wrapper {
    overflow: visible;
    }

    and I have tried adding floating-toc to class ID in the 1/3 container and in the top text element.

    what am i doing that’s not working? 🙂

    snebelung
    Participant
    Post count: 3

    The code wasn’t working for me either, but I read somewhere that if the enclosing container (whatever that may be in your case) has display: flex, you also need to set align-items: flex-start. I added that code and it now works for me. Maybe this will help someone else.

    Here’s my source: https://www.digitalocean.com/community/tutorials/css-position-sticky

    In this example, the align-items: flex-start rule on the flex container is important because otherwise flex items default to a value of stretch where the elements would take the whole height of the container, canceling the sticky effect.

Viewing 15 posts - 1 through 15 (of 21 total)
  • You must be logged in to reply to this topic.