How can I add 2 separate menus to the mobile version of a WordPress website? [week old, still need help]

Question

My site has 2 separate sections each with it's own menu, I can sort the menu out no problem on desktop versions - how can I add 2 separate menus for each section on mobile versions though (is it even possible?)?

Here is my site , from a desktop you should see that clicking on 'Our Lady of the Wayside' brings you to a sections with a different menu.

I'm using the Jetpack plugin to create the mobile version.

I'd really appreciate any help with this.

Niall

Answer 1

You can provide 2 different menus with mediaQueries, eg

Mobile first:

.mobile-menu {
   display: block;
 }

.desktop-menu {
   display: none;
  }

@media (min-width: 600px) {
  .mobile-menu {
    display: none;
  }
  .desktop-menu {
    display: block;
  }
}

etc.

http://codepen.io/HendrikEng/pen/MJjmQM