How to toggle top-bar/title-bar menu with JS

My website uses Foundation 6.5.3 with responsive togggle navigation: Top-bar menu for desktop devices (large) and the title-bar menu for mobile devices (medium & small).

Problem

I have many items in the navigation. This leads to the menu items going into a second line when viewport is below 1287 pixels. I don’t want it to do that, instead, I’d like it to switch to the title bar menu at that point. The exact viewport where the problem occurs might change in the future when there are changes to the website’s content. So what I want is that the menu switches from top-bar to title-bar as soon as it doesn’t fit into one line anymore.

What I’ve tried

I have written this JavaScript code:

responsiveNav();
function responsiveNav() {
  "use strict";
  var topBar = document.querySelector(".top-bar");
  var titleBar = document.querySelector(".title-bar");
  if (topBar.offsetHeight > 48) {
    topBar.style.display = "none";
    titleBar.style.display = "flex";
  } else {}
}
window.addEventListener('resize', responsiveNav);

It does work partially: When the top-bar is higher than 48 pixels, the title-bar is shown instead. But the menu is not interactive, when clicking the burger icon, nothing happens. What do I need to do to activate it?