Step 2 - After step one there will appear three floating group dropdown on the repeating element on your index page. Change these settings to the correct settings and your done.
It’s working better but the problem now is that the leftmenu does not stick to the top and bottom rather it stretches… You can see the difference in behavior in preview
You can see the difference in this page and homepage. You scan scroll down and the left menu also scrolls down and does not attach to the bottom. On the homepage only the body group is scrollable. So there seems to be an issue with the reusable element not having the same properties as normal.
On the index page the left menu is scrollable while on the homepage the left menu is not scrollable and only scrollable when subcategories are folded out.
@nocodeventure: I see what you are trying to explain. I guess, the scrolling effect has some dependency on screen resolution. I observe different behaviour based on the screen resolution. If I take a look at the pages on a high resolution screen (1920*1080), I don’t observe this behaviour.
@nocodeventure: I think I have found out the cause of the issue. Since I don’t have edit permissions, I couldn’t verify it. The left menu reusable element that you have created doesn’t have a max width defined. What this is in turn doing is that, when the page width is high, it is messing with the floating menu. See below.
I appreciate all the help and advice everyone, please see attached video recording. The homepage is acting differently and it has nothing do to with the width. It has to do with the floating to the top and bottom not working as it should be.