Vertical Mobile Menu

This page shows how a fully displayed menu can be shown on mobile widths instead of a drop-down menu. It utilizes a sidebar which is hidden on desktop widths, but is displayed using a media query on mobile widths. To see how it works, shrink the width of your browser window until it reaches the width of a tablet. The vertical menu will appear at the bottom of the page.

The sidebar contains a Custom Menu widget, which is styled using CSS. The CSS for hiding and displaying the sidebar would look something like this:

/* Hide the sidebar by default */
#widgetarea-one {
  display: none;
  padding: 0;
}
 
/* Hide the default mobile menu when the viewport width is 767px or less */
@media only screen and (max-width: 767px) {
 
  /* Hide the default mobile menu */
  .menu1-mobile,
  #menu1-wrapper {
      display: none;
  }
  /* Display the sidebar, which should display at the bottom */
   #widgetarea-one {
      display: block;
   }
}

You can also create a widget area above the footer, and hide/display that widget area using the same concepts as above.