Skip to main content Skip to footer
SevenSpark logo
  • Shop
  • Articles
  • About
  • Help
  • Shop
  • Articles
  • About
  • Help
Login

Menu positioned absolutely

Troubleshooter
Diagnosis
Menu is not positioned properly · UberMenu

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.

Details

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;
}
SevenSpark Logo
Follow on FacebookFollow on XFollow on YouTube

Plugins

  • UberMenu Mega Menu
  • ShiftNav Mobile Menu
  • Bellows Accordion Menu
  • Carbon Copy Menu Duplicator

Resources

  • Articles
  • Tutorials
  • Support Center
  • About SevenSpark

Newsletter

Get exclusive deals by signing up to our Newsletter.

Copyright 2025 © SevenSpark LLC

  • Privacy Settings
  • Privacy Policy
  • Terms of Service
  • Disclaimer