Cannot click on half of the screen because of header dropdown

Created a header with a dropdown. When using the header it works great the problem is it affects everything on the page and my other reusable elements. Not sure how to work around this. Heres an image

Group E is the dropdown. The dropdown is similar to Amazon’s dropdown where a gray screen covers everything when signing in.

I came across this before but can’t for the life of me remember how I fixed it. I take it the header is a reusable element too right?

Try directly setting the height of the reusable element by typing it in (rather than dragging since the drop down will stop you from reducing the height).

Try right clicking and sending the element backwards.

A ‘group’ will always push other groups down when it’s visible.

I use a group focus for the dropdown in my header, as a group focus will float over the other elements (like a popup). It’s animated to transition down so visually looks like a dropdown.

It’s a headache to work this responsiveness out… Been days I try to figure this out for my shopping cart.

The solution is removing the header.