Unlike other responsive systems, UberMenu uses a single set of menu items that are displayed at all sizes. Using CSS, the menu format adapts to the various device widths to present a quality navigation experience as the viewport resizes.

Breakpoints

> 960px

Approximate device size: Full Size Monitor or Horizontal Tablet/iPad

Target Media Query

@media only screen and (min-width: 960px){

}

767px – 960px

Approximate device size: Vertical Tablet/iPad

Any menu items that don’t fit on the top level will automatically wrap to a second row. Submenus still accessible as normal.

Target Media Query

@media only screen and (max-width: 960px){

}

480px – 767px

Approximate device size: Horizontal Phone/iPod

Below 767px, the menu collapses to a single bar that can be clicked/tapped to expand the submenu items.

Default state

Expanded state

Top level menu items will be laid out from left to right, top to bottom, with two menu items on each row.

Submenu open state

Target Media Query

@media only screen and (min-width: 480px) and (max-width: 767px) {

}

< 480px

Approximate device size: Vertical Phone/iPod

Below 480px, the menu collapses further and top level menu items will each take up an entire row.

Default state

Expanded state

Submenu open state

Target Media Query

@media only screen and (max-width: 479px){

}