Building a responsive mobile menu - Simple but complicated

I'm hoping to get advice or pointed in the right direction. Here is my problem first...

My website has a very plain horizontal wordpress menu which is pretty much the same coding as the default twenty sixteen theme (except I'm not using their aria controller for the responsive menu as I don't fully understand it). It doesn't have any additional dropdowns off of the li's or anything it's just about 5 standard links. I need to make it responsive so that when viewed on a mobile device it becomes a single button with a dropdown for the options. If you've viewed the macrumors mobile site you'll see the dropdown I'm going for almost exactly.

The more complicated aspect is that I need the html etc to be pretty static because I use a php ob flush to write the rendered html to a text file. Then I pull it into my forum template so that we maintain a consistent menu bar without having to create two separate menu's each time... one for wordpress and one for our forum.

I don't want to use a plugin for this. I'd really prefer to learn from my treehouse membership but so far I've not found a good match. I've done a jquery course but that showed how to use an selection/input box or whatever and not what I want to do. I've come across a blog post on here but again wasn't what I'm trying to do. Even the wordpress course was helpful teaching about walker incase I end up needing to do that but still didn't seem to cover what I need to know.

Am I missing a course? Any advice on a course to watch or the best way to approach this? Thanks in advance!