Add a fullwidth submenu in single portfolio with hooks

Hello I have to add a fullwidth submenu in single portfolio items when the website is in mobile view, in the same way as it appears in the page
https://www.marinemammalhabitat.org/immas-description-and-fact-sheets/ (where I added the submenu with the ava layout element and via css it appears only when @media only screen <768px).

Since I have many portfolio pages, I wish I could do it with a hook in my functions.php. The portfolio page has a sidebar and the menu should stay exactly at the top of the page, before the column containing text, so that it doesn’t bother with the sidebar.

I tried the following

add_action('ava_after_main_container', function() {
if ( is_singular( 'portfolio' )  ) {

    echo do_shortcode("
            [av_submenu which_menu='' menu='39' position='center' color='main_color' mobile='active' mobile_switch='av-switch-768' alb_description='' id='imma-description-menu' custom_class='' template_class='' av_uid='av-koybsgm7' sc_version='1.0']
            [av_submenu_item title='Menu Item 1' button_style='' link='' linktarget='' av_uid='av-4ycjp0' sc_version='1.0']
            [av_submenu_item title='Menu Item 2' button_style='' link='' linktarget='' av_uid='av-32shok' sc_version='1.0']
            [/av_submenu]
        ");

    }
});

The submenu is visible when in @media only screen<768px, but the code breaks the sidebar when @media only screen >768px (the sidebar content appears at the bottom of the page)

I also tried other hooks:
ava_after_main_title -> the same problem as before
ava_after_content -> it doesn’t break the sidebar, but it doesn’t append the submenu

Do you have any suggestion to solve the problem? Thanks