+ Reply to Thread
Results 1 to 4 of 4

Thread: How to make the sidebar stable on category & listing page?

  1. #1
    Senior Member
    Join Date
    May 2014
    Posts
    182

    How to make the sidebar stable on category & listing page?

    Hello, I want to have the sidebar stable eventhough the main content has lots of listings or listing content

    For example, if a user scroll through the page the sidebar should not be scrollable once its reached the end of sidebar which has no further blocks/sections, only the main content should be scrollable.

    https://classifieds.demoflynax.com/p...san-francisco/ - stable1.jpg

    https://classifieds.demoflynax.com/p...ave-88-65.html - stable2.jpg

  2. #2
    You need to modify stylesheet style.css at section.side_block:not(.no-style) (line 5110) to add:

    position: sticky;
    top:0;


    Image 002.jpg


    You also have to remove the overflow:hidden; property from 3 places to make the sticky work properly. Sticky does not work when parent or ancestors have overflow property.

    Image 004.jpg


    Now the column is following the screen while scrolling. When you get to the bottom, it moves up not to overlap with the footer.

    Image 005.jpg
    Last edited by daniel7; May 6, 2022 at 11:12 AM.

  3. #3
    Senior Member
    Join Date
    May 2014
    Posts
    182
    Hello Daniel, It works fine when it has only one sidebar block.

    But if we have two or more sidebar block, it overlaps the one with another.

    For example, https://classifieds.demoflynax.com/u...roperties.html

    In this link, we have "SEARCH FOR RESERVATIONS" another sidebar.

    Do we have to sticky this css <aside class="left col-lg-3">, to have whole sidebar sticky? I applied sticky to this class, but not working.

  4. #4
    I solved this by adding a new <div class="sticky"> so that all the blocks are inside it.

    If you apply the sticky css property to this div, I will keep all the blocks inside it as a solid and move all together.

+ Reply to Thread