Can’t make the plugin work

Hello,

It seems that the following theme script prevents “Page scroll to id” from doing its thing:

...themes/oceanwp/assets/js/theme.vanilla.min.js

First, try going to plugin settings and add the following in “Prevent other scripts from handling plugin’s links selector(s)” option field:

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

Save changes and test.

If this doesn’t work, check to see if there’s a setting or option in your theme to disable its in-page anchor scrolling. The link below seems to show where such option is:

https://www.onsitewp.com/oceanwp-breaks-navigation-menu-same-page-anchor-links/

Let me know

Typing the URL in browser’s address bar works because “Page scroll to id” is not prevented by the other script(s) that handle the menu links.

The problem is that there are 2 scripts (one from the theme and another one from the jet engine plugin that handle your menu links (i.e. scroll the page to the target).

Add again the value I posted in “Prevent other scripts from handling plugin’s links selector(s)” option and make sure OceanWP scroll effect is turned off. Then let me know so I can check the page because the only solution would be to edit the js files manually.

You’re welcome 🙂

I checked the page again and unless there are other settings in your theme and the Jet menu, the only way to solve this is, is by manually editing the js files.

I don’t know if you can or want to do this but if you do, this is what you need:

Backup the 2 files below before modifying them in case of a typo error!

1.Edit this file:

...themes/oceanwp/assets/js/theme.vanilla.min.js

Change the text:

a[href*="#"]:not([href="#"]), a.local[href*="#"]:not([href="#"]), .local a[href*="#"]:not([href="#"]), a.menu-link[href*="#"]:not([href="#"]), a.sidr-class-menu-link[href*="#"]:not([href="#"])

with:

a[href*="#"]:not([href="#"]):not(.__mPS2id), a.local[href*="#"]:not([href="#"]), .local a[href*="#"]:not([href="#"]), a.menu-link[href*="#"]:not([href="#"]), a.sidr-class-menu-link[href*="#"]:not([href="#"])

Make sure you’re replacing the exact text shown above!

Save the file.

2.Edit this file:

...plugins/jet-menu/assets/public/js/legacy/jet-menu-public-scripts.js

Change the text:

this.$instance.on( 'click', '.jet-menu-item > a', { instance: this }, clickHandler );

with:

this.$instance.on( 'click', '.jet-menu-item > a:not(.__mPS2id)', { instance: this }, clickHandler );

Again, make sure you’re replacing the exact text shown above and save the file.

Test and let me know if it worked (it should).

In case it doesn’t work, I’ll provide a slightly different code to test.

To find text in the files you normally use the Ctrl+F in Windows/Linux and Command+F in OSX on your keyboard. In the first file (theme.vanilla.min.js) the js code is minified, so it’s difficult to read but if you use the keyboard shortcut and replace the exact text, you should be fine.

OK. Change the text of theme.vanilla.min.js to:

a[href*="#"]:not([href="#"]):not([data-ps2id-api]), a.local[href*="#"]:not([href="#"]), .local a[href*="#"]:not([href="#"]), a.menu-link[href*="#"]:not([href="#"]), a.sidr-class-menu-link[href*="#"]:not([href="#"])

Leave the other file (jet-menu-public-scripts.js) as it is.

Sure, let me know what you need.

Yes it is 😉

You can find the related plugin options here and here and a guide here.

I can provide you with the actual CSS to use for your page layout:

For example the following will make your teacher menu sticky and highlight each section link while scrolling the page:

/* sticky menu */
.elementor-element.elementor-element-bccc53b.elementor-widget.elementor-widget-jet-mega-menu{
    position: sticky;
    top: 0;
    background-color: white;
    z-index: 3;
    margin: 20px 0 30px 0;
}

.elementor-909 .elementor-element.elementor-element-bccc53b .jet-menu .jet-menu-item .top-level-link{
    padding-top: 10px;
}

.elementor-909 .elementor-element.elementor-element-bccc53b > .elementor-widget-container{
    margin-top: 0;
    margin-bottom: 0;
}

/* links highlighting */
.elementor-909 .elementor-element.elementor-element-bccc53b .jet-menu .jet-menu-item > .top-level-link.mPS2id-highlight-first, 
.elementor-909 .elementor-element.elementor-element-bccc53b .jet-menu .jet-menu-item:first-child > .top-level-link.mPS2id-highlight:not(.mPS2id-highlight-first){
    color: #ff7333;
    border-style: solid;
    border-width: 0px 0px 3px 0px;
    border-color: #ff7333;
}

Hope this helps

No problem 🙂

Let me know if/when you need more help.