This is searchable archive of our old support forums, which operated from 2012 - 2016. To find out how to get support for your current theme, please visit our support page.

Tagged: 

Anchors in mobile menu

  • Creator
    Topic
  • #24346
    Vinko Prelac
    Participant

    Hi,
    I came across a problem: website I’m building uses a single-page layout, meaning that menu items are anchors, section IDs on the home page, and using menu to jump to sections doesn’t work when mobile menu is activated. I’m not sure if I explained this correctly so I’ve setup a test site where you can see this situation: http://jstest.dev.webencore.net/

    So, open this test site, resize browser to a width less than 992px, open the menu and try to click to any home-section item. Now, if you go to another page (name “Another page” in my menu…) and then select a home-section, it will open without any problems.

    Help in resolving this is much appreciated!

Viewing 5 replies - 1 through 5 (of 5 total)
  • Author
    Replies
  • #24347
    Jason Bobich
    Keymaster
    #24348
    Vinko Prelac
    Participant

    Great, thanks! Now, if only the menu would close after activating a link… 🙂

    #24505
    Vinko Prelac
    Participant

    Hi,
    I have to ask this again, because client noticed that mobile menu doesn’t close after activating items linked to anchors on the same page. Is there a way to fix this somehow, and trigger closing the menu on menu item clicks (touches)?

    #24506
    Jason Bobich
    Keymaster

    This will be a code customization you’ll need to make for your client, and is going to require basic javascript knowledge.

    If you shrink your browser window down to a mobile viewport size and inspect with your browser’s developer tools, you can see that using the awesomeness of CSS3 transitions, the menu panel animates open and closed simply based on the classes mobile-menu-right-off and mobile-menu-right-on being swapped on the <body>.

    Using jQuery would probably be your best bet. So, in a javascript file you’d enqueue from your child theme, you’d just target the anchors in the main menu, and .on('click' ..., swap out that class on the body.

    https://codex.wordpress.org/Function_Reference/wp_enqueue_script
    http://api.jquery.com/on/
    https://api.jquery.com/addclass/
    https://api.jquery.com/removeclass/

    #24534
    Vinko Prelac
    Participant

    Thanks for the guidance! This does the trick:

    $('.menu-btn').on('click', function() {
        $('body').removeClass("mobile-menu-right-on").addClass("mobile-menu-right-off");
        $('#primary-menu-close').css("display", "none");
        $('#primary-menu-open').css("display", "block");
    });
Viewing 5 replies - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.