Bi-Lingual Site; Header Problems

Site URL: https://www.bridgingfortomorrow.org/give-spanish

I'm working on the Spanish side of our website. I've hidden the footer and just re-created a block that looks just like the English footer on each Spanish page in Spanish (or it will be in Spanish, I haven't translated it all yet). It was laborious, but it worked. 

Fixing the header is not nearly so easy. I hid the normal (English) header, and I've gotten some links to display up top. Currently the links aren't pointed in the correct place, but that's not the problem. When I switch to mobile (or change the size of my screen at all) the new "navigation" that I've cobbled together doesn't move at all. In fact, on mobile, it just... disappears off the screen. The main problem I'm trying to fix is that the English nav points to the English pages. I need a Spanish nav that I can point to the Spanish pages, but not across the whole site. This is just the work-around I've come up with. 

Is this a decent work around? Can someone help me figure out how to make this new nav bar I've created responsive OR suggest a better idea? Open to any suggestions and appreciative of any!! 

Code I'm currently using on the header/nav:
 

Thanks!!