Include main menu with off canvas button on mobile devices

Hello. I have a primary menu with pages like about, contact, account. Then I have an off canvas menu that has the store product category buttons.

This works well on desktop, but on mobile the primary menu disappears. There is just the off canvas toggle button that opens the off canvas shop menu. I would like to have that off canvas toggle button as a menu option on the primary menu, and for the primary menu to show on the mobile devices.

I can't seem to get this to work. When I make a custom menu link using
<a class="slideout-toggle custom-slideout-toggle" href="#"></a>
on the main menu to trigger the off canvas menu, and hide the default off canvas toggle menu button by using

.main-navigation .slideout-toggle:not(.custom-slideout-toggle) {
    display: none !important;
}

But doing that combined with the various settings in customizer: Layout >
Off Canvas Panel does not solve the problem. On mobile I am either forced to use the off canvas menu instead of the primary menu, or turn the off canvas menu entirely for mobile. I can't seem to combine the off canvas buttons/functions into the mobile primary menu.

Thank you,