I’m working on a site layout that will allow me to make an off-canvas navigation in mobile view.
How can I structure a html layout with a horizontal header navigation and a left side navigation in desktop mode, which can be combined into one single menu in mobile mode?
Say, I have these basic building blocks – positioned like this in desktop:
<header>Horizontal top menu</header>
<nav>Left menu</nav><main>Main content</main>
<footer>Footer</footer>
For mobile, I would like to be able to move the top menu and the left nav menu into a combined off-canvas mobile menu.
How can I structure my html and/or css grid to make this possible without javascript? How is everyone else doing this? Bootstrap is also an option.