Hi,
I’ve simply taken 3 elements from the library (Side Menu, Header and content). (img 1)
In the tab or mobile view when I open the menu through the hamburger icon the menu spills into the heading and content section. (img 2 & 3)
How do I make it responsive in the tab and mobile mode?
I’ve tried a few settings in relating with the “IsOpen” variable, but I’m not able to achieve the desired results.
Any suggestions please?
Has this been resolved?
Hey there, sorry we missed your question the first time around @pacifist9722! And thanks for following up @JMac 
To clarify for everyone, in the Layout tab, we recommend using the layout components that go together. So if you’re building a sidemenu, the three sidemenu components will be responsive by default when you add them on a page:
Here’s a video showing you exactly how those sidemenu components work together.
Thanks!
It works really well now.
So that what I did actually.
I was using all the three components of the layout.
But the problem was there still. I later figured out that may be because of some bug the Z-axis of the side menu was not “999” but was “0”, in my case and that’s what was causing the problem.
That’s actually when I learnt what Z-axis does. It helped me a lot when I wanted to put in a modal that hides the side menu as well. Because by default Z-axis of a Modal is set 1.
Image1 with Z-axis as 0 and Image with Z-axis as “999”.
Image3 with Z-axis of a Modal set to 1 (You can see that the side menu is still accessible)
Image4 with Z-axis of a Modal set to >=30 (For some weird reason @Joyce why 30?) (now the side menu is not accessible)
1 more thing I figured out was that somehow the positioning of the modals in the elements tab made a difference.
Image1: When Sidemenu is placed at the top (Even if I set Z-axis to zero, there’s no spillage)
Image2: When Sidemenu is placed at bottom and Z-axis is 0, there’s a spillage.
Why does positioning matters in case of modals? @Joyce can you through some light on this?
Mmmm I’m not sure. Let me ask the team about this and get back to you on this one.
There are two factors that determine what shows up in front like you already pointed out:
If the Z-index of elements is the same then the vertical hierarchy is determined by the order of the elements from the bottom to the top.
However, with Z-index we can override this and by saying that our modal has a higher Z-index than all the other elements, it will always be on top no matter what is the order of the elements.
Hope this helps.
Also some of the elements in our UI kits have had wrong Z-indexes which should be fixed now, but feel free to point out if something does not work properly.
@luka Thanks for the clarification, it really helps in understanding.
