Menu items dont scroll

The plugin is not enabled on your menu links (you have unchecked the “Enable on WordPress Menu links” option). It’s only enabled on the “Join now!” button because this button is the only one that has the ps2id class.

In addition, your theme has a function that scrolls the page which prevents “Page scroll to id” from doing its thing.

Go to “Page scroll to id” settings and:

1. Enable/check “Enable on WordPress Menu links” option
2. Enable/check “Prevent other scripts from handling plugin’s links” option

Save changes and test your page. Everything should be working.

If not, go to “Page scroll to id” settings again and change “Selector(s)” field value to:

a[rel='m_PageScroll2id'], .menu-item a

or add the ps2id class manually on your menu items (in WordPress/Appearance/Menus).

Let me know

Thanks for getting back with me, but unfortunately none of these solutions seemed to work for me. I was testing different solutions earlier and had unchecked the enable and forgot to turn it back. I think a problem with adding the ps2id class to the menu item is that it’s not adding the class to the link itself, but one of its parent elements. The persistent problem is that it will change the url to /#contact but it wont scroll, but if you refresh the page it will scroll down just fine. Weird.

• This reply was modified 7 years, 1 month ago by ventureboy.

Ok since you checked “Enable on WordPress Menu links” option, you don’t need to add the ps2id class. Leave this option checked so the plugin can handle the menu link(s).

The main issue is that “Prevent other scripts from handling plugin’s links” option cannot remove the theme’s scrolling functionality automatically. Most of the time it can (that’s why I added this option) but sometimes a theme won’t allow it for some reason (like in your case).

The theme script with the scrolling functionality is:
...themes/startup-company/js/jquery.script.js
and the only way to fix this, is to manually edit the script above and make a tiny change. Can you do this?

If yes, edit jquery.script.js, go to line 1103 (function commented as “Scroll to Sections on Link Click”) and change this line from:

$('nav a[href*="#"], a.ls-l, .hash-link a, a.hash-link').on('click', function () {

to:

$('nav a[href*="#"]:not(._mPS2id-h), a.ls-l, .hash-link a, a.hash-link').on('click', function () {

Save the file and test again (make sure the file is not cached).

If the above doesn’t do the trick, edit the file again and change the same line (1103) to:

$('a.ls-l, .hash-link a, a.hash-link').on('click', function () {

What we’re doing is just telling the theme script to avoid handling menu links handled by “Page scroll to id”.

Let me know

Yes it worked! That’s amazing. Debugging wordpress has always been such a pain for me. If you don’t mind me asking how exactly did you know where to locate the problem? But thanks again, for having such great support and answering back so quick.

You’re welcome ??

To locate the problem, you first need to guess what kind of problem you have (html, js, css etc.). In your case, the problem was related to javascript because a)only javascript can prevent the page from jumping to a target id and b)only javascript can animate page scrolling in the first place.

So when you click a link in the form of #id and nothing happens, it means that either no target with that id exists or there’s something wrong with the javascript that handles this functionality.

To find what exactly happens, you need to use the browser’s developer tools. So, open your page with Chrome and hit F12 or right-click and inspect element. There you can see if the target exists. If it does, then the issue comes from javascript.

In the dev tools “Elements” tab, click/select the link you want to investigate and click the “Event Listeners” tab on the right side of dev tools window. There you can see all the js click events on this link. Toggle the click events and click each js file to see which one handles page scrolling (you can also remove any event on-the-fly and test the link).
In your case it was the last one (jquery.script.js). Click on its file name and the script will open in the “Sources” tab where you can see the code.

After that, it’s a matter of knowing some javascript to pinpoint exactly the issue and how to tweak the code in order to fix it.

All this sounds more complicated/hard than it actually is. If you do this few times, you’ll get the hang of it (the main thing is to know a bit javascript as many issues come from it).

Personally, I can locate and find solutions relatively quickly (most of the times) simply because I wrote the plugin (so I know what it does on the code level) and because I have huge experience with locating such issues as I do it almost daily (I also know and write a lot of javascript which of course helps).

Sorry for the long reply but sometimes it takes a lot of writing to describe things you do quickly ??

I play around pretty often in the dev tools and I never thought to check out the event listeners, awesome pointer thanks man!

Hi there,
I cannot seem to get the scroll to work. I have read some of your responses to other’s problems and I haven’t been able to problem solve my way to a solution. My site is currently at https://292.b78.myftpupload.com If you click the menu item “inspiration” you will see the hash id but it does not scroll. When I inspect the back end, it does not look like the has id is taking where it should, which is on the headline “Blocked and Locked.” Any help to get this working would be greatly appreciated. I can send you my login if that is easier for you. Just let me know how to do that privately.
Thanks so much.
K

Hello,

I just checked your page.
There’s no BlockedLocked target element in your page (i.e. an element with id BlockedLocked).

1)You need to create the target element(s) – See here for more info.

2)You also need to enable the plugin on your menu links (since your theme does not allow to do it automatically):

Go to plugin settings, change “Selector(s)” field value to:

a[href*=#]:not([href=#])

and hit save changes.

Or if you prefer, you can add the ps2id class in your menu items which does the same thing (more info).

Let me know ??

• This reply was modified 7 years, 1 month ago by malihu.

Thank you, Malihu!

I haven’t found a solution. I realize there is no target element when you look at the back end of the page (view source) but I did the “page scroll to id target” and entered BlockedLocked and itnk uoy s resulted in this: [ps2id id=’BlockedLocked’ target=”/] Yet as you can see, there is no target element on the back end, instead there is this line:

<p style=”text-align: center;”>Blocked and Locked</p>

I made the plugin setting change you suggested, but that did not help this other target issue I am having. Any ideas?

Thanks so much for your help.
K

I didn’t paste that line above correctly. this is the line where i think the target should be but is not:

<p style=”text-align: center;”>Blocked and Locked</p>

This is so strange-the line is not posting here. I will try to paste the rest of the above line here. After Blcked and Locked there is no <p> but this is the rest of the line:
</p>

It did not work. To can see it you will have to look at the back of the page. So strange!

Are you using some kind of page builder plugin to edit your pages/posts?

Yes, king Composer

Does this composer allow you to insert WordPress shortcodes?

Maybe you can add the shortcode in the “Text” editor tab when you’re editing a text block.

In addition, you can add the id value you want directly in the row. Click “Open row settings” (or “Section settings”) of the row you want and insert the id you want (e.g. BlockedLocked) in the “Row ID” field.

Does this help?