Hamburger Menu Toggle doesn’t work when in AMP mode

  • Resolved paul13234

    (@pavelreuk)


    3 months, 1 week ago

    Hi,

    I tried to incorporate this code in order to get the menu toggle working just like the non-amp mobile but for some reason it won’t work as I can’t seem to find the ID’s for the Elementor Menu toggle that is on the website. My nav toggle is not working when in AMP responsive mode. Below is my code that I currently have.

    add_theme_support(
    ‘amp’,
    array(
    ‘nav_menu_toggle’ => array(
    ‘nav_container_id’ => ‘menu-1-0719615’,
    ‘nav_container_toggle_class’ => ‘menu-is-active’,
    ‘menu_button_id’ => ‘mobile-nav-menu-btn’,
    ‘menu_button_toggle_class’ => ‘hfe-active-menu’,
    ),
    )
    );

    The hamburger toggle for mobile doesn’t work in AMP. Please let me know what I’m doing wrong? I don’t know if the mobile-nav-menu-btn is the correct id for the menu_button_id as the elementor menu doesn’t have an id so I had to assign an ID, which put it in a different spot.

    Thank you!

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Support Milind More

    (@milindmore22)

    Hello @pavelreuk

    Thank you for reaching out to us, I will recommend rechecking out guide for mobile navigation, additionally, please ensure that you are using the correct elements for toggle selection.

    You have selected nav_container_id as menu-1-0719615 but the actual navigation container that affects is <nav> element which has toggle class menu-is-active, similarly div with class hfe-nav-menu__toggle has toggle class.

    I will recommend using nav_container_xpath for adding container with class and menu_button_xpath for menu with class as described in our guide

    If you are using the Astra theme, I will recommend using the default menu, which works out of the box instead of Elementor menus.

    We hope this helps!

    Thread Starter paul13234

    (@pavelreuk)

    I’m trying the nav_container_xpath and menu_button_xpath and this is what i got but the menu still isn’t working?

    add_theme_support(
    ‘amp’,
    array(
    ‘nav_menu_toggle’ => array(
    ‘nav_container_xpath’ => ‘//[@id=”mobile-nav-menu-btn”]/div/div/nav’, ‘nav_container_toggle_class’ => ‘hfe-active-menu’, ‘menu_button_xpath’ => ‘//[@id=”mobile-nav-menu-btn”]/div/div/div’,
    ‘menu_button_toggle_class’ => ‘hfe-active-menu’,
    ),
    )
    );

    Could you help me figure out what i’m doing wrong?

    Plugin Support Milind More

    (@milindmore22)

    Hello @pavelreuk

    The code looks good, it should work, however it’s difficult for me to reproduce your site, so I can’t give you exact solution and you have to find out the correct xpath with trial and error

    You may also try AMP generic compatibility plugin which might help you.

    Plugin Support Milind More

    (@milindmore22)

    @pavelreuk As we didn’t receive a response I’ll mark this as resolved. Feel free to open a new support topic if you require any further assistance.

Viewing 4 replies - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.