Hamburger overlay that when it expands it moves content underneath it

Is this result you're looking for?

Hi Giliard yes this is the result I am looking to achieve and understand…  thanks just seen your attached figma so best to go with more straight forward result instead of complex overlay - can it be done using a overlay? Think that was also my question from what I was reading? Anyway many thanks for sharing output. Chris 

You can simply wrap (using auto layout) all the content in order that you want and then split into 2 screens:

1) with the menu closed (you can put opacity 0%, zero for height and check the "clip content" to make it not overlap during the animation).

2) with the menu opened. (set height to hug and opacity to 100%)

I've built this in this file, so you can explore it.

Yes, it is possible with an overlay using absolute positioning for the elements that you want to be in front

Thanks Gillard, following so far … I was thinking about the animation - 

I am looking to know if I can replicate the way the hamburger menu animates
doubt I can as animation it animates upwards from the breadcrumbs !?

Any ideas  

https://environment.data.gov.uk/searchresults?query=&allowEmptySearch=false

Tested in iPhone SE responsive dimensions 

Appreciate input I had a play..

I assume thats what the other way of doing it gives you - overlay using absolute positioning for the elements that you want to be in front as you mentioned above - it gives move control over the animation styles you can apply… 

Added some animation to the menu items, trying to replicate. Let me know what you think.

Hi Giliard, I assume from the response you built something and where looking to share it from the response - would be interested in taking a look.

Chris 

Hi Giliard, I have this at the moment - thought I would share my fail… Chris 

Menu Test