All the details would take a full blown tutorial to cover. There are also several ways to go about it. I suggest you look at existing themes as examples. Any of the default twenty* themes would work.
I would in particular look at the “_s” (or underscores) starter theme for guidance as its implementation is minimal and easier to follow. It actually doesn’t have the classic hamburger icon but substituting an image for the button they use is trivial.
For the most part, it’s all managed with CSS, especially media queries which are only applied to viewports under a certain size. A bit of JavaScript is required to toggle visibility on and off by altering the class attribute of the overall menu container. Each class gets appropriate CSS applied. _s adds or removes the class “toggled” to control visibility.
That’s about the minimum required. More elaborate versions are possible. All the way to completely separate HTML, CSS, and JS that is completely removed from the desktop menu.
You may not be aware that hardly anyone creates WP themes completely from scratch. There is a lot of tedious boilerplate no one would care to do more than once, if at all. Most themes are either built off starter themes like _s, or formal frameworks. Most (all?) frameworks are not GPL licensed, a deal breaker if your theme is intended for the WP repository.
Building a theme from scratch might seem to be a good learning exercise, but I think there are better projects to spend your time on. One learns plenty from just adapting a starter theme for the first time. What you do learn is much more applicable than doing what a starter theme already does for you.
Happy coding ??
