Can the submenu push down the other content on my site?

Knowledgebase Docs » UberMenu 3
USEFUL? 5
UberMenu 2UberMenu 3

In short, no.

UberMenu is a semantically hierarchical menu. That means that submenu items are actually child elements of their parent nodes in the HTML markup / DOM. In other words, the structure is like this

<ul>

  <!-- Top Level Menu Item -->
  <li>
    <a>Top Level Item (First Level)</a>

    <ul>

      <!-- Second Level Menu Item -->
      <li>
        <a>Submenu Header (Second Level)</a>

        <ul>

          <!-- Third Level Menu Item 1 -->
          <li>
            <a>Submenu Item 1 (Third Level)</a>
          </li> 
          <!-- end Third Level Menu Item 1 -->

          <!-- Third Level Menu Item 2 -->
          <li>
            <a>Submenu Item 2 (Third Level)</a>
          </li> 
          <!-- end Third Level Menu Item 2 -->

        </ul>

      </li>
      <!-- end Second Level Menu Item -->

    </ul>

  </li>
  <!-- end Top Level Menu Item -->

</ul>

This structure is very important because the semantics of the markup allow search engine spiders to properly index your site’s content and know how pieces of content are related to one another. In other words, this standard menu markup makes the menu SEO-friendly.

As a result, submenus must be positioned absolutely (otherwise they would visually appear inside their parent items), and therefore they will not displace other items on your page.

In short:

  1. UberMenu is semantically hierarchical for SEO purposes
  2. That means child item elements are actually contained within parent item elements
  3. Therefore submenus must be absolutely positioned, or else they would simply stretch the top level menu items when displayed
  4. Absolutely positioned elements are taken out of the flow of the document, and therefore cannot displace other elements on the page (they will overlap them)
  5. Since the submenus can’t displace other items on the page, the submenus cannot push down content on your site

In shorter: Submenus can’t push down content because they’re absolutely positioned, which is necessary due to UberMenu’s SEO-friendly properties

But I still wanna do it anyway

When I say it isn’t possible to push down the content, what I mean is it isn’t possible to do so using natural HTML/CSS layouts. It’s always best to have the layout of your site be dictated by the natural flow of the elements – this is especially important with responsive content, when dimensions can change dynamically; there’s no way to accomplish it that way, so I don’t recommend it.

If you’re really hell-bent on this effect, you can brute-force mimic it with some custom javascript. The easiest way to accomplish this will be to set a fixed height on all of your submenu ULs. Then, when the menu is opened, you’ll want to add a margin or padding to the top of your content div (in the theme) to slide the content down. This is the lightest-weight way to accomplish the effect, though the structure is not very flexible (all submenus should be the same height to make it simple), and you’ll have to consider how to handle responsiveness.

Useful resources:

UberMenu 3

UberMenu 2

If you need assistance with customizations, WerkPress is available for hire.