I have an issue where my current build the Nav(nestable) isn’t displaying properly when its currently scrolled and have an overlapping problem with the pages itself as shown in the shared jam video.
I have these properties z-index of the Nav(nestable) set to 999999 and the issue still remains when it’s on scroll. I will try an alternate solution for this issue with off canvas but as for now the current issue still remains within the builder.
Hi @RomelKarl,
The problem would be that that transform:translate property that you have on the bottom section inside a header when scrolling.
When you apply transform property on the element, it creates a new local coordinate system (CSS Transforms Module Level 1), and that affects all child elements.
And one of the child elements of that section is your offcanvas, which should become position:fixed when opened, but it doesn’t because of that above.
For a solution, you will need some workaround, and maybe you can remove transform property when you click on it and then add some negative margin, to set the element back on top or you will need to find an other way to make this section sticky.
Or maybe move OffCanvas element out of that section.
One other way would be to use bricks_after_header hook for example.
Because of the reason above, I will mark this as a no bug.
Ok thanks for the info. I’ve managed to bypass this issue by placing the 2nd section of the navigation to the pages itself. It’s an odd alternate solution but this works for now. It would be great if we could do two sections can be configured with this slide up effect without affecting the mobile responsive of the widget.
that’s also one solution, yes. But now if you want to update it, you need to update it on every page. Also, check z-index in your section, because now this happens when scrolling down over one other section:
Anyway, I still suggest you try that bricks_after_headerhook. It’s simple, and it will work. You just need to create one (section) template and apply conditions like this. And the section will show after a header, just like it does now. And you will not need to change it in multiple places as you need it now.
