Best way to combine two wordpress menus to one in Mobile View?

1

Hi Folks,

I am not sure if this is a specific Roots Question or not, but I really need some help/advice on the best way forward, so any help/pointers/links are appreciated:

I want to divide up the main menu in two menus, managed separately in Wordpress, and displayed in various parts of the Theme. However, when in the the mobile view, when Bootstrap collapses down to the menu button, I would like the menu items from both menus appear in the mobile menu.

What is the best way to achieve this?
(I am not a strong programmer so please bear that in mind when answering. Not afraid to try and learn though! )

Here is another way of describing the same thing:
Main Menu:

  • About us
  • Schedule
  • Staff

Header Menu:

  • Home
  • News
  • Join
  • Contact

And in Mobile view the menu should be combined like this:
Mobile Menu:

  • Home
  • News
  • Join
  • Contact
  • About us
  • Schedule
  • Staff
2

Not really a Roots question, but you can probably accomplish this by using a single menu and the CSS Classes menu properties. Just give each menu item a class depending on which menu you want the item to display in, then it’s all down to just hiding/revealing them in the right place using CSS.