It took me a while to work out too.
On your Menu Bar you have to create a second menu container.
The first menu container has your normal menu on it. you have to go to 'Customise' on that container, and check the 'Hide During Breakpoints" for the smaller 3 sizes
On the second new container you put a new element on, say 'Navigation Collapsed' (one of the 'mobile' menu options), and check the 'Hide During Breakpoints" for the larger 2 sizes.
So now, when your page gets narrower it will hide the 'main' menu element and then display the new mobile nav bar.
Hope that makes sense