Ok I implemented the code as you recommended and got rid of the ‘hamburger’ behaviour. I had to add quite a lot of CSS style over rides to your theme styles and target a few responsive breakpoints but I think I’m closer to the end goal.
One thing I am really struggling with right now is to get the secondary menu to appear below the site identity element (logo) when viewing on mobile/smartphone devices. Right now it appears at the top and it looks kinda ugly.
I am assuming I will need to customise the php code for the header.php file. Something I think I might have already done in the functions.php file to modify the display of the site identity within the header. How would I go about it? Is it better to use some GP Hooks to swap the order of the secondary menu and the site identity element or make a copy of the header.php file in my child theme?
By the way, I want the behaviour to still be the same on desktop/tablet where the secondary menu aligns with site identity element and floats right from it.