Diagnosis

Menu is obstructed by another element on the page

24

When two elements overlap, one has to be on top. The one on the bottom may still be visible if the top element is transparent, but the bottom element can’t be interacted with because click/hover events are applied to the top level element and are blocked from the one below it.

Background

When two elements overlap, one has to be on top. The one on the bottom may still be visible if the top element is transparent, but the bottom element can’t be interacted with because click/hover events are applied to the top level element and are blocked from the one below it. Imagine you’re trying to press a button but there is a pane of fiberglass in front of it. You press on the glass but nothing happens to the button because it is blocked by the glass.

The Problem

UberMenu is a floated element. If not properly cleared, other elements from your theme may overlap and cover up UberMenu so that it can’t be interacted with.

Identifying the issue

The easiest way to spot this is to right-click on the part of the menu that you can’t interact with, and (in Chrome) click Inspect Element. If the element that is revealed in the inspector is not part of UberMenu, it means the element that IS revealed (or one of its ancestors) is covering your UberMenu.

Solution

Generally the solution is to find the overlapping element and adding a clear:both; to it. Sometimes the situation will instead warrant an adjustment of relative z-indexes instead.