How not to overlap items because of frame-size

In my app I have 2 times a menu, one on the line below the other.

When the app is set to standard height of 500 px, the menu’s overlap in height. When I set the app height (wordpress verge3d plugin) to 800 px, the menu’s not overlap.

It seems to be the css file where the solution should take place.
I read that when the div’s for both menu’s are absolute without ancestor, then they could overlap.

from w3school.com: position: absolute;

An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).
However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling.

.menu1 {
margin: 0;
position: absolute;
top: 20%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}

.menu2 {
margin: 0;
position: absolute;
top: 27%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}

Any idea what to add in the html or css to get the menu’s location move/scale automatically with the window/frame size?

One other thing is that the menu’s disappear when clicking the full-screen button.