Here is the fix, it shouldn't have been this hard. There's a major bug in the template between left and right positioning of the burger-icon.
/*Off Canvas Menu Fix by Brad */
#sp-menu.menu-with-social .sp-megamenu-wrapper {
flex: auto;
justify-content: space-between;
display: flex !important;
align-items: center;
flex-direction: row;
justify-content: flex-end;
}
@media (max-width: 896px) {
#sp-header.full-header-left .menu-with-offcanvas #offcanvas-toggler,
#sp-header.full-header-center .menu-with-offcanvas #offcanvas-toggler,
#sp-header.header-with-modal-menu .menu-with-offcanvas #offcanvas-toggler,
#sp-header.lg-header .menu-with-offcanvas #offcanvas-toggler,
#sp-header.header-with-social .menu-with-offcanvas #offcanvas-toggler {
display: block !important;
}
}
The media query was hiding the burger menu from appearing in template.css
#sp-header.full-header-left .menu-with-offcanvas #offcanvas-toggler,#sp-header.full-header-center .menu-with-offcanvas #offcanvas-toggler,#sp-header.header-with-modal-menu .menu-with-offcanvas #offcanvas-toggler,#sp-header.lg-header .menu-with-offcanvas #offcanvas-toggler,#sp-header.header-with-social .menu-with-offcanvas #offcanvas-toggler {
display: none !important
}