Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1301667

    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

    #1302012

    Hey Elena,

    Could you please try changing your code to following one?

    add_action('ava_after_main_container', function() {
    if ( is_singular( 'portfolio' ) && wp_is_mobile() ) {
    
        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]
            ");
    
        }
    });

    With this condition it would only echo on mobile devices and so should not break the sidebar on desktops – https://developer.wordpress.org/reference/functions/wp_is_mobile/

    Best regards,
    Yigit

    #1302038

    Fantastic Yigit, it worked perfectly! You can close the ticket and thanks very much

    #1302042

    Hi,

    You are welcome, Elena!
    Let us know if you have any other questions and enjoy the rest of your day! :)

    Best regards,
    Yigit

Viewing 4 posts - 1 through 4 (of 4 total)

The topic ‘Add a fullwidth submenu in single portfolio with hooks’ is closed to new replies.