Bricks' native 'Nav Menu' element comes with a built-in mobile menu, which shrinks the menu down to a menu toggle button to open an offcanvas type container.
In this Pro tutorial, we'll look at how we can combine multiple menus into this one mobile menu, so even though we may have multiple menus in different locations for desktop devices, for mobiles it'll reduce to just one menu toggle button and all the menu items will be found inside of one mobile menu.
Example header with multiple, separate menus.. here we have three menus
For mobile, we want them all to be contained within one mobile menu and have only one menu toggle button to reveal them.
Choosing the Mobile Menu
The first step is to choose which of our menus is our 'main menu', which will be used for our one mobile menu. A sensible way to choose could be just based on where we want our menu toggle button to be placed. If we have multiple header rows, it'll be the menu that is positioned inside of the header row where we want our menu toggle to appear on mobile.
Then we note the element's ID for use later, it'll look something like 'brxe-jlvunl' (written in the class dropdown).
Lastly, we choose the width where the mobile menu needs to kick in, for eg choosing 'Mobile landscape' from the 'Show Mobile Menu Toggle' dropdown will ensure the mobile menu toggle is visible at 478px and below.
Choosing the 'Other Menus'
Not every menu on the page may need to be included in our mobile menu. For example, some menus inside of the footer may need their own menu toggle, or maybe have no separate mobile version at all.
The way to select which menus are included is to give them a class. Any menus where the menu items need to be included inside of our mobile menu, we'll give them a class 'move-menu'. We also need to set the width for where the mobile menu kicks in, to match our main menu. For example, select 'Mobile landscape' again. (important - this needs to be the same as the main menu to make sure the menu items are all hidden at the same width)
