Header inside Off-Canvas Panel

– the hamburger icon is not displaying, I have icon type set to SVG in the customizer settings.

It's because you have this CSS to hide it:

.gp-icon.icon-menu-bars svg:first-child {
    display: none;
}

– on mobile when the menu/canvas is open the close/X disappears so there's no way to close the menu

You can try increasing the value of the CSS you added, for eg. 150px

#generate-slideout-menu {
  top: 125px;
}

Also I want the hamburger icon/menu toggle floated to the right and logo on the left for mobile view.

You can try activating the mobile header at customizer > layout > header. See if you like the layout.

Let me know :)

Thanks so much for this, thats fixed most of those issues. By using the mobile header it resolved the issue with the close toggle not being accessible. However, I notice when you close the menu it sometimes shows another close toggle instead of the hamburger?

It's because you hide the default close button of off-canvas panel (highlighted in red). The other close button can not properly function for off-canvas panle.

See the default close button for off canvas panel: https://www.screencast.com/t/LH1n1jKy

See the CSS you added: https://www.screencast.com/t/Cpap2lh7

You'll need to remove the CSS above, then it should function properly.