Menu positioned absolutely

Background

UberMenu replaces the markup of the menu in your theme. However, it also replaces the CSS styles. If the position of the theme’s menu was determined by absolute positioning rather than relative positioning, the menu may not appear in the expected location.

Absolutely positioned elements do not take up “space” in the layout – so relatively positioned elements will not be pushed down the page because of them.

The Problem

Some themes lay out their header using absolute positioning.

For example, instead of just allowing the elements to position as they naturally would when stacked and floated together (postion:relative), they explicitly state where different elements should be, regardless of the natural flow of elements (position:absolute).

When UberMenu replaces the theme menu, these absolute CSS styles may no longer apply. As a result, the menu can appear out of position. For example, if all elements in the header are positioned absolutely, the menu may end up appearing at the very top, even though it is below them in the markup.

Identifying the issue

Use your web inspector to inspect the elements in the header – if they are positioned absolutely, that is likely the issue.

You can disable UberMenu temporarily and check the positioning of the original menu for position:absolute; as well.

The Solution

Generally the solution is as simple as applying the original positioning code to UberMenu instead. For example, if the original menu CSS looks like this:

#navigation{
  position:absolute;
  top:50px;
  left:0;
}

You simply need to write some Adding Custom CSS to duplicate the positioning code for UberMenu

UberMenu 3

/* Note this will apply to any and all UberMenus on the page - if you have multiple instances, you'll need to use a unique selector */
.ubermenu{
  position:absolute;
  top:50px;
  left:0;
}

UberMenu 2

#megaMenu{
  position:absolute;
  top:50px;
  left:0;
}