0

I'm using Create, a WP theme by Themetrust and reached out on their forums with no reply. I'm using the slide menu with smooth scroll, the linking/scrolling is working fine. As of now the slide menu only closes when the "x" icon is clicked. When a menu link is clicked the smooth scroll occurs correctly, but the menu stays visible. I'd like for the menu to slide away in an identical way as it does when the "x" is clicked.

In the below code I've tried switching '#menu-toggle-close' for '#slide-panel". This seems to work in resized mobile browsers but not on an actual mobile device. Any advice would be appreciated.enter image description here

Here is the HTML:

<div id="slide-panel">
    <div class="hidden-scroll">
        <div class="inner has-mobile-menu">

            <nav id="slide-mobile-menu" class="menu-one-page-menu-container"><ul id="menu-one-page-menu" class="collapse sidebar"><li id="menu-item-1274" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1274"><a href="#our-approach" data-ps2id-api="true">Our Approach</a></li>

Here is the function:

function initSlideMenu(){
var siteContainer = $j('#site-wrap');
slideMenu = $j('#slide-panel');
slideMenuWidth = slideMenu.outerWidth();
$j('.menu-toggle.open').on('click', function () {
    slideMenu.css('transform', 'translateX(0)');        
});
$j('#menu-toggle-close').on('click', function () {      
    slideMenu.css('transform', 'translateX(' + slideMenuWidth + 'px)');     
});
var browserWidth = $j(window).width();
if(isMobile.any() && browserWidth < 768) {
    var browserWidth = $j(window).width();
    slideMenuWidth = browserWidth;
    slideMenu.css('width', browserWidth + 'px');
}
slideMenu.css('transform', 'translateX(' + slideMenuWidth + 'px)'); 
slideMenu.css('visibility', 'visible'); 

}

0

I was able to find an answer to this provided by @malihu, author of the page to scroll id plugin - as @malihu noted, I was using a one-page menu for my theme, and the function of click to scroll isn't tied to a page. This code ties the menu action to the scroll and not only a page link.

Mobile menu not auto close on menu link @malihu

<script> 
(function($){
    $(window).on("load",function(){         $("body").on("click","#slide-mobile-menu .menu-item a[href*='#']",function(){$("#menu-toggle-close")[0].click();});     }); })(jQuery); </script>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.