[Resolved] Slide out Menu mysteriously messed up

[Dinesh]

Hello, I had a working slide out menu for the past few months. suddenly mysteriously it has started acting strange and I seem to have no idea why, the ‘x’ mark to close is not where it is supposed to be, it is happening both on desktop as well as mobile. I used the same CSS as suggested by you guys in other forums, did something change recently that could have caused this? Please help.

[Tom]

The slideout navigation was completely rebuilt in GPP 1.6.

If you’re using custom CSS to show your slideout on the right, you can remove it and use the built in option in “Customize > Layout > Slideout navigation”.

Let me know 🙂

[Dinesh]

Thank you Sir.

That fixed the problem on my Desktop but on mobile I have an issue. I have a single scroll page and on mobile when the slide-out menu is called and one of the links of the single scroll page are clicked the page scrolls in the background but the menu slideout menu does slide back in.

To replicate it go to the url on mobile, click the slide-out menu. Hit any link from the first 6 links. you will notice that the page scrolls in the background but the menu covers it since it does not slide back in. Kindly help this is causing a lot of user experience pain 🙁

[Tom]

Our built in smooth scroll option will close the slideout navigation if an anchor is clicked: Customize > General.

[Dinesh]

The option is enabled/checked. still having the same problem on mobile. this wasn’t the case earlier before the navigation was rebuilt.

On mobile the slide-out does not close :(. Please help.

[Tom]

You’re still using the page scroll to ID plugin.

Remove that plugin, and give your menu items this class: smooth-scroll

Adding classes: https://docs.generatepress.com/article/using-the-wordpress-menu-builder/#custom-classes

[Dinesh]

But I have always used page scroll to ID from day 1 on this website and never had a problem till recently after slide out was re-built. is there a compatibility issue between the new build and page scroll to id?

[Tom]

It used to use a somewhat messy method to close itself when an anchor was clicked.

Now that we have our own smooth scroll script, it closes the slideout navigation for you in a much better way when smooth scroll is done scrolling.

[Dinesh]

If I remove page scroll to id I’ll have to end up doing a lot of work again on my main page. If I use smooth-scroll how do I set my id’s to scroll to a certain location on the webpage and how to I set the scroll time? using page scroll to id I was able to set scroll speed to what I liked and use id’s easily on Elementor page builder. How does smooth-scroll do these tasks? is there some sort of tutorial?

I apologize for my lack on knowledge with this particular smooth-scroll class but to me it seems like I have to redo a lot of work to fix something that was working just fine before slide-out was rebuilt.

Once again I apologize but it would be great if you could provide some direction or tutorial as to how I can replicate what I was able to achieve with page scroll to id using smooth-scroll?

[Tom]

Let’s try to make it work with the page scroll to ID plugin.

I checked out their documentation, and adding this to your wp_footer hook should do it:

<script>
    jQuery( document ).ready( function($) {
        $("a[rel='m_PageScroll2id']").mPageScroll2id({
            onComplete:function(){
                // Close slideout menu if it's open.
		if ( document.body.classList.contains( 'slide-opened' ) ) {
			window.offside.factory.closeOpenOffside();
		}
            }
        });
    } );
</script>

[Dinesh]

Unfortunately that did not work.

I am not averse to trying out to smooth-scroll option if that makes this fix any faster. as long as smooth-scroll allows us to manipulate the time it takes to scroll. as of now the way my site works is if I am clicking the links on the same page then the scroll time is 1000 milliseconds, but when I click from another page the scroll time is set to 1 milliseconds to give the feeling of instant load. hope that makes sense. if this can be achieved with smooth-scroll then I’m all in to give it a shot.

Otherwise using page scroll id is the only option and after adding the scrip you provided to wp_footer hook the slide out menu still does not go away on clicking 🙁

[Tom]

You can set the duration for our smooth scroll script like this:

add_filter( 'generate_smooth_scroll_duration', 'tu_smooth_scroll_duration' );
function tu_smooth_scroll_duration() {
    return 800; // milliseconds
}

When you navigate from a separate page, the smooth scroll won’t work – it will just take you to the anchor.

[Dinesh]

is this the code i need to add in the wp_footer hook?

<script>
jQuery(function($) {
$(document).on(‘click’, ‘a[href*=”#”]:not([href=”#”])’, function(e) {
if (location.pathname.replace(/^\//,”) == this.pathname.replace(/^\//,”) && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $(‘[name=’ + this.hash.slice(1) +’]’);
if (target.length) {
e.preventDefault();
$(‘html,body’).animate({
scrollTop: target.offset().top
}, 500);
}
}
});
});
</script>

where do I add the scrolling filter? and how do I set the anchors? is there any tutorial explaining the steps?

[Tom]

That script would create a smooth scroll effect, so you wouldn’t need the built in option checked.

You can add the filter like this: https://docs.generatepress.com/article/adding-php/

You have to give the anchor point an ID, like this:

<div id="my-id">
    My content.
</div>

Then link to it:

<a href="#my-id">Go to My ID</a>

[Dinesh]

I’d rather use the in-built option over scripting, I found the script from one of your older posts. Guess I dont need it now that you have a built in option.

But I am still clueless about where to add the anchor point. pardon my utter lack on knowledge and super basic web development skills.

I am using Elementor page builder and With page scroll to id I utilize an in-built page scroll to id widget on elementor, I simply drag it and place it on top of the section I want to scroll to, add the id, apply the offset value within the plugin and add url in custom link with https://website.com/#my-id & voila it all just works.

For GP smooth scroll I don’t believe there is any in-built widget, then how and where do I set the anchor? do I use the Elementor standard menu anchor element and place the id in there?

Next is “Linking to it”. Is this to be done under the URL option in Custom Links?

A guide on how to get started with smooth-scroll would be very helpful to folks with limited knowledge such as me. I even went through the documentation but could not find much info to help me get started.

[Author]

Posts