Make current website menu into responsive hamburger menu for mobile devices (+ optional code clean-up)

Hi all, I have a simple website template based on Bootstrap 4 with a regular dropdown menu at the top. When I bought this template some time ago, there used to be actual code for a second responsive menu in the HTML right below the HTML-code for the regular menu, but I find it redundant to have two separate menus in my code. There should be a better way. That's why I removed the latter and now only have my non-responsive menubar. I would like someone to add functionality to my exisiting code that transforms the current menubar into a responsive one based on the common breakpoints / resolution of devices. I prefer a hamburger menu that expands downward on click, not sideways. Note: I'm open to any code changes, I wouldn't even mind if you strip out the entire current menu, but I do want the look of the current menu preserved. Attached you will find a few screenshots of the current (widescreen) menu and the current look on mobile devices (i.e. lacking a menu) and my preferred look after your implementation. The actual template files will be send after awarding the project. ------------- ------------- Optional: since it was a very bloated template when I bought it, there is a LOT of redundant code in the CSS/JS that I do not and will not use. I would pay extra to have all these unused elements removed from the code. Of course all current necessary functionality should be preserved.