I just realized that the menu/header I have gets pretty wonky in the tablet middle space between mobile and desktop. I’ve posted a link to the site, you can test it out by making the browser window bigger/smaller.
I think making it act similar to Generatepress.com implementation seems to be great, in just making the menu go below the header (I would want to keep displaying the phone number as well though like I do on destkop). I’ve attached a screenshot.
The issue here doesn’t exactly occur on tablets only as the “wonky” look starts at around 1140px viewport width which is still in desktop breakpoint. (desktop breakpoint starts at 1025px, tablet at 1024px – 769px)
If I may suggest, change this CSS on your Additional CSS: