Unlike dual-menu 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){
}
480px – 959px
Approximate device size: Vertical iPad, Horizontal Phone/iPod
Below 960px, 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: 959px) {
}
< 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){
}