Hi there, i am working on the exact same thing and i think with your solution i figured it out. I put in a vertical header on desktop and tablet with for instance 300 px width (the setting under template settings). Changing the container or section to display none or hidden or collapse wont work cause of that header width that stays the same. To make this disappear i change the width to 0px on the smaller sizes. From there on i load on every page or template the mobile header which i put in a template so i can change it everywhere if needed. This gets me the result i want, though it feels a little hacky.
If the suggestion above of changing the position could be integrated that would be amazing!
Hello, sorry for the delay in responding. So I did some tests and concluded that for me the best thing is to use the top menu for mobile and on the desktop to create the side menu, the menu on mobile is more important than the desktop side menu, and by not using my mobile you It loses a great menu for mobile instead of the side.
It would be nice if bricks had an adaptable menu for desktop and mobile, but I believe that one day they will do this, but at the moment I think the best choice would be to use the main menu on mobile and hide it on the desktop and create a side menu for the desktop .
For anyone interested, this is how i did it on the project i mentioned earlier: Ruben Bruggeling (note this is very much a work in progress)
As you can see the mobile menu pops up when the size gets smaller and the side menu dissapears. The good thing is that this is the same menu which i load with a shortcode, but in a different place, so i can edit it in one template. But its not a very pretty solution i think cause there is a little shift every time you change pages. I will try to see if the suggested solution with code works better for me. But it would be great if the breakpoint solution gets built in some day!