I put this below wp_footer (in footer.php) and it actually seems to work!
<script>
jQuery(document).ready(function($) {
// add a class to the items in the side nav so that i can target them.
// put the entire side nav content into a variable
// put the side nav menu into a variable
$(‘#menu-sidenav’).children(‘li’).addClass(‘addednav’);
var sidebarContent = $(‘#left-sidebar’).html(); // what in #left-sidebar, which is .inside-left-sidebar
var sidebarNav = $(“#menu-sidenav”).html(); // the li’s within the sidenav
// if width is mobile by default, add the sidebar nav items to the main menu, and remove the sidebar.
if ($(window).width() <= 767 ){
$( “#menu-main-menu” ).prepend( $( sidebarNav ) );
$( “.inside-left-sidebar” ).remove();
}
// if resized to mobile width, add a class to the sidebar nav menu items, then add those to the main nav. remove the “addednav” class items when you put it back.
$(window).resize(function() {
if ($(window).width() <= 767 ) {
$( “#menu-main-menu” ).prepend( $( sidebarNav ) );
$( “.inside-left-sidebar” ).remove();
}
});
$(window).resize(function() {
if ($(window).width() >= 768 ) {
$(‘#menu-main-menu’).children(‘li.addednav’).remove();
$( “.inside-left-sidebar” ).remove(); // so it doesn’t come up twice
$(‘#left-sidebar’).append( $(sidebarContent) );
}
});
});
</script>