Page scroll to id for WordPress
Knowledge Base – FAQ
-
No, the plugin works strictly on document's root element (html/body) in order to function properly with element highlighting, deep-linking etc.
-
A quick way is to enable Keep the current element highlighted until the next one comes into view option
Alternatively, you could use the wrapper target shortcode to create your id targets and have full control over the scrolling distance your link(s) stay highlighted.
-
Make sure your target element is at the top by checking its position via browser's developer tools (in most browser's, you can right-click the element and select "Inspect" to view it within the HTML code).
If your link's URL is#top
and no such target id exist in your page, the plugin will scroll the page automatically to the very top (determined by the position of thebody
tag in the HTML). -
The page should scroll to the top (i.e. starting) position of the target, so firstly make sure that your target(s) position is indeed correct (or what you want it to be). Note that the top position of elements does not include CSS margins, so check if you need to adjust any of your target's CSS properties.
In general, you can adjust/tweak the scroll-to position by changing your target(s) position or by using plugin's "Offset" option.
For example, if your page has a top sticky/fixed-positioned menu, you should set an offset value in order to avoid the menu covering your content when the page is scrolled. -
Add the full address as your links URL/href value instead of just the hash with the id. For example, instead of
#my-id
, usehttp://my-site.com/page/#my-id
or/page/#my-id
etc. in the link's URL. -
The plugin has the options to scroll from/to different pages enabled by default (if not, enable it), so you only need create links with the full address in their URL (e.g.
http://my-site.com/page/#my-id
). -
You should use plugin's "Offset" option and set how much you want to offset page scroll (see option for more info).
-
Yes, via Disable plugin below option. You can set a
width
orwidth,height
value (indicating pixels) below which the plugin will be disabled (see option for more info). -
It does. You can take a look at the jQuery/non-wordpress version of the plugin for available options, methods etc. The plugin script offers things like changing options on-the-fly, triggering scroll events programmatically, running callback functions at the beginning and end of each scroll etc., so contact me if you need help 🙂
-
Yes, set different vertical and horizontal offsets by adding comma separated values in plugin's "Offset" option field.
For instance, inserting100,50
will offset vertical scrolling by 100 pixels and horizontal scrolling by 50 pixels). -
Yes. If you're using plugin's "Insert/edit Page scroll to id link" button in WordPress visual editor, you can set a link-specific offset value in the "Offset" field of the "Page scroll to id" modal.
If you're using plugin's shortcode, you can use the offset attribute like so:
[ps2id url='#some-id' offset='100']link text[/ps2id]
If you create your links manually in HTML, you can use the
data-ps2id-offset
attribute like so:<a href="#some-id" rel="m_PageScroll2id" data-ps2id-offset="100">link text</a>
For WordPress menu items, you can use the class
ps2id-offset-NUMBER
in the menu item Classes field, replacingNUMBER
with the offset you want for that specific menu link. For example, for 80px offset, add the classps2id-offset-80
(feature added in plugin's version 1.7.4). -
Firstly, you need to determine if highlighting comes from "Page scroll to id" or by your WordPress theme. If you didn't use any of the plugin's highlight classes in your CSS, then the highlighting you see comes from your theme's stylesheet. It's common for themes to style current page menu items differently. If that's the case, you should edit (or overwrite) your theme's CSS.
If you did use plugin's
mPS2id-highlight
class in your CSS, then you can try any of the following:- Enable Allow only one highlighted element at a time option in plugin settings.
- Instead of
.mPS2id-highlight
, use.mPS2id-highlight-first
or.mPS2id-highlight-last
selectors in your CSS to style the first or last highlighted link accordingly.
-
- Create your menu items/links on your menu (Appearance → Menus). You should create/add "Custom links" as these type of links allow us to enter a custom URL with the id we want. Your links URL could be in the form of
#my-id
,http://my-site.com/page/#my-id
,/page/#my-id
etc. - Create the id targets that your links will scroll to, using plugin's "Insert Page scroll to id target" button in WordPress visual editor or plugin's shortcodes.
Another option is to use id values that already exist in your theme. - The plugin is enabled by default on WordPress Menu links so normally everything should work.
Some themes have their own custom function for generating menus which might prevent the "Enable on WordPress Menu links" option from working. In such case or if for any reason you need to enable the plugin on your links manually, do the following:- Go to Appearance → Menus to edit your links.
- Click "Screen Options" at the very top and make sure "CSS Classes" is checked.
- Click to edit each one of the links you've created and insert the
ps2id
value in "CSS Classes" field. - Save your menu. Any menu item/link with
ps2id
class will be handled by the plugin.
.menu-item a[href*='#']
, so try adding this value in "Selector(s)".
- Create your menu items/links on your menu (Appearance → Menus). You should create/add "Custom links" as these type of links allow us to enter a custom URL with the id we want. Your links URL could be in the form of
-
You basically need to see the generated HTML code of your page(s) and search for
id="some-id"
patterns, e.g.<div id="some-id">...</div>
The best way to do this is to use browser's developer tools (Chrome and Firefox are browsers with great developer tools), so the steps are as follows:- Open your page in say Google Chrome.
- Hit the F12 key or right-click any element a click "Inspect" to open the developer tools window.
- Switch to "Elements" panel (if necessary) where you can see the page's HTML code (in real-time).
In this panel you can toggle each HTML tag and hovering over each one, highlights it in browser's main window (where you can conveniently see its actual position within the page/document). The tags/elements you should look for are within thebody
tag.
You can also right-click any element in the main window (e.g. a title, paragraph, section, image etc.) and click "Inspect" to highlight it in the "Elements" panel. There you can see if the inspected element has an id attribute value and use it as your link(s) target.
-
It is possible only if you can add custom javascript in your template/theme. See "Page scroll to id with mousewheel and keyboard" guide.
-
You can change the scroll duration/speed of a link by giving it a special class in the form of
ps2id-speed-VALUE
(i.e.ps2id-speed-600
) withVALUE
indicating the scroll duration in milliseconds (lower duration equals faster scrolling).If you're using plugin's "Insert/edit Page scroll to id link" button in WordPress visual editor, you can add the special class in the "Custom class(es)" field of the "Page scroll to id" modal.
If you're using plugin's shortcode, you can use the class attribute
-
Yes. Add
define('PS2ID_MINIFIED_JS', false);
in yourwp-config.php
file to instruct the plugin to load the non-minified/development version of its scripts. -
Image map links (
area
elements) work the same as normal links (anchors). See this comment and this thread. -
Some themes and plugins change document's length while the page is scrolling. A common example would be when a menu becomes sticky (i.e. fixed) only when the user has scrolled down the page. There are cases where when this happens, the menu's previous state (when it was not sticky) space becomes zero, thus changing the document/page length. This means that targets position is different according to the state of the menu, that's why when clicking the link a second time, scrolling seem to become "correct".
You can deal with this either by adjusting your menu CSS (not always possible) or by enabling Verify target position and readjust scrolling (if necessary), after scrolling animation is complete option in plugin's settings.
-
You can overwrite some of plugin's option via javascript. For example, you could add the following script in your theme's header.php inside the head tag:
window.ps2id_special_params={ highlightSelector: "a.some-class" };
You can use the following option parameters:
highlightSelector
,scrollEasing
,scrollSpeed
,keepHighlightUntilNext
,forceSingleHighlight
,appendHash
,layout
,offset
You can also do the same by adding the following in your theme/child-theme functions.php:
add_action( 'wp_enqueue_scripts', 'ps2id_special_params_0', 1 ); function ps2id_special_params_0(){ if(class_exists('malihuPageScroll2id')){ $pages_arr = ps2id_mw_get_pages(); if(is_single( 23 )) : wp_register_script( 'page-scroll-to-id-special-js-params', '', array(), '0.0.1', false ); wp_enqueue_script( 'page-scroll-to-id-special-js-params' ); wp_add_inline_script( 'page-scroll-to-id-special-js-params', 'window.ps2id_special_params={ highlightSelector: "", scrollEasing: "easeOutCirc", scrollSpeed: 700, keepHighlightUntilNext: false, forceSingleHighlight: false, appendHash: false, layout: "auto", offset: 100 };'); endif; } }
The function above will add the script on the post with id 23 (see:
is_single( 23 )
). -
In plugin settings change the "Selecotr(s)" option value from
a[href*=#]:not([href=#]):not([data-vc-tabs]):not([data-vc-accordion])
to the defaulta[href*='#']:not([href='#'])
The issue is related to this topic.
Pages: 1 2
hi there
Thanks for the wonderfull plugin.
I have a weird problem with it.
The plugin works for all links, except for the mobile menu on the homepage. Desktop menu on the same page works. mobile menu on other pages works. its just the mobile menu on this one page that wont execute the script.
im using divi builder
Cant figure out whats wrong. help would be highly appreciated.
Thanks
Hi,
See my reply to your comment here:
http://manos.malihu.gr/using-page-scroll-to-id-with-the-divi-builder-plugin/comment-page-1/#comment-24278
Hey Malihu!
Really nice work on the plugin, works flawlessly!
Is it possible though, to have certain padding in this auto scroll js with your plugin:
<script> (function($){ $(window).on("load",function(){ //assuming your target id you want to scroll to is: my-id if(!$("#section-1").length) return; var $delay=2200; //set the delay in milliseconds setTimeout(function(){ $.mPageScroll2id("scrollTo","#section-1"); },$delay); }); })(jQuery); </script>
To clarify – I need the website to scroll not to ID (in this case section-1) but slightly above. There is a simple work-around, create a empty row with padding, but in my case it later on adds too much additional space. So the best solution would be adding certain padding options which could let the code scroll slightly above/below the directed section, thank you!
Hi,
Depending on the layout and design of your page, you might be able to do what you need with a bit of negative top margin and an equal positive top padding on the element:
#section-1{ margin-top: -100px; padding-top: 100px; }
Alternatively, you might be able to achieve something similar with a
:before
css pseudo-element with an absolute position and a negative top value, e.g. something like this:#section-1{ position: relative; } #section-1::before{ content: ""; display: "block"; left: 0; top: -100px; }
I’m not sure if any of the above will work in your case (I’d have to see your page to know) but try it and let me know.
Also, note that the CSS solution I provided will always work on the element, i.e. will offset scrolling when auto-scrolling on page load, when clicking a link etc.
If you only want to offset the auto-scrolling in the page load code and not change the element’s actual offset, you can try changing the
scrollTo
method in the code like this:$.mPageScroll2id("scrollTo","#section-1",{ offset:100 });
Hello, I’m really happy with this plugin and really like how it works on my site. However, I recently setup a frame redirect for another domain I own, and the plug in doesn’t appear to be working when that site URL is present. Has this happened to anyone else? Any tips?
Hi,
Can you post your page/site URL so I can check what happens?
Unfortunately the site isn’t live yet (it’s on an under construction page) but I have been briefly putting it live for testing. Basically the plugin works completely fine on my normal website, but when accessed via the redirected url (which is redirected as a frame redirect to preserve the url) the plug in doesn’t work. Interestingly enough the menu options do still jump to the correct position on the page, just not with the scrolling effect.
I see. Unfortunately the plugin (like many js scripts) does not work inside iframe(s).
This said, you can try/test the following and see if it solves the issue:
1)Add the following in your
wp-config.php
(this file is in site’s root dir):define('PS2ID_MINIFIED_JS', false);
Save the file.
2)Edit plugin’s
jquery.malihu.PageScroll2id-init.js
file which is inside thejs
folder in plugin’s directory.Add the following code below line 173 (
liveSelector:_o.instances... ...+autoSelectors
):,inIframe:true
so code becomes like this:
...["selector"]+",."+shortcodeClass+","+autoSelectors ,inIframe:true }); //scroll to location hash on page load ...
Save the file and test your iframe to see if it worked.
Hi, thanks for the response, I’ve only just been able to see it. It’s not in an iframe, it’s just the method of redirection – so the domain provider basically sends visitors to the domain (say domain x) to my website (domain y) but masks the address with the domain (domain x) they’ve typed in. This particular redirection is called frame redirection. This also means that my domain (x) doesn’t have any hosted folders and therefore no php or js elements to be edited.
Does that make sense? If not, I guess it will just have to be a peculiarity that I’ll have to live with.
Thanks for your help so far
What URLs have you set in your links? Are they like
#my-id
orhttp://mydomain/#my-id
? If it’s like the latter try to change them to use root-relative URLs like/#my-id
If the above doesn’t work, I think you still need to try editing
jquery.malihu.PageScroll2id-init.js
in your “domain y” files and see if it works.You need to make the changes in “domain y” files (it doesn’t matter if “domain x” has no directory).
Hello,
I love the plug in’s ability.
I’ve followed the instructions for installing and connecting PageScroll to ID.
I’m using WP theme Twenty Seventeen.
I used it a few years ago developing locally with no issue.
This time, the scrolling doesn’t function as expected.
It reloads the page on each menu selection- then scrolls to the section once the page reloads to the header.
I’ve read some of the solutions you provided to others.
My site- since its in localhost right now- doesn’t have the issue with https / http. Its http.
I’m not sure what else to check for why its behaving with a reload on each menu selection.
the format of the URL in the custom links is:
http://localhost:8888/threeRivers/#panel3
The CSS Classes attribute for the Custom Links are all set to
ps2id
Permalinks setting is set to “Plain”
Thank you for any guidance you may be able to provide.
Hi,
Check if the trailing slash (/) is needed or not, e.g. change your link URL to:
http://localhost:8888/threeRivers#panel3
and test the page.
Good day Mahilu,
Thank you for replying.
I removed the trailing slash, it behaves the same.
Make sure your link’s URL is exactly the same with the URL you see in browser’s address bar after you’ve clicked it and the page has fully re-loaded.
The link’s URL should be exactly the same with the one you see in the browser.
Good day Malihu,
Thank you for your reply.
Since I’m developing locally, this is the URL in the browser’s address bar.
http://localhost:8888/threeRivers/wp-admin/customize.php?url=http%3A%2F%2Flocalhost%3A8888%2FthreeRivers%2F
It doesn’t change with the selection of the different menu items.
Update:
It behaves as expected when I close the WP customize panel.
It scrolls to the proper section without reloading the page.
I closed the WP customize panel as I saw the URL I sent above includes the customization window that was open.
The URL though doesn’t change on each menu selection and scroll to that section, it is always:
http://localhost:8888/threeRivers/
I’m not sure if that is normal behavior for the URL or if it should be changing to add the proper section name in the URL once it lands on the chosen section.
Nonetheless the scrolling works without page reload when Customization panel is closed.
No problem 🙂
The URL you posted is in the WordPress administration when using the customizer.
In order to see how your page actually works, you should test it in a new browser tab with URL:
http://localhost:8888/threeRivers/
In other words, you should not test your links inside WordPress customizer.
Yes, lesson learned.
I apologize for the waste of your time, but greatly appreciate your replies.
It works as expected then 🙂
The address bar URL not changing is normal plugin behavior but you can change it if you want in plugin’s settings:
Go to “Page scroll to id” settings and enable “Append the clicked link’s hash value to browser’s URL/address bar” option. Save changes and test.
Excellent! Thank you for the direction. I enabled that setting, the change occurs now.
Thank you again,
No problem. I’m happy to help 🙂
Hi, thank you for your plugin et all your work !
My site (still in development) : https://www.wildbac.ma.fr/
(password : terrepromise)
I have one menu with 5 anchor links on the home page (“Accueil”). And then 4 pages.
I’am working with Divi.
The plugin seems to work well on desktop. Scroll to sections, links between pages and anchors, items highlighted in the menu and on scroll…. everything is ok on desktop.
I used .mPS2id-highlight class to style anchor items with just a red color.
#top-menu .menu-item-object-custom .mPS2id-highlight { color: #7a132c !important; }
Problem is on mobile : anchor links work well, scroll is ok. But anchor links don’t get .mPS2id-highlight class. And no class such as”current-item” (only for “accueil”). I don’t know why the menu behaves differently on mobile and why there is no mPS2id-highlight class.
I currently removed any css to try to style those anchors on mobile.
I hope my explanations are clear. Sorry for my bad english. I appreciate any help you can offer.
Hi,
Disable “Allow only one highlighted element at a time” option in plugin settings. This is causing the issue. Uncheck the option, save changes and test. It should be working 😉
Hi, sorry but it doesn’t work : no mPS2id-highlight class on mobile…. any other idea ?
No, it does work. It’s just that the css selector you added is only for the desktop menu. Your mobile menu id is mobile_menu, so you need to add to your css:
#mobile_menu .menu-item .mPS2id-highlight { color: #7a132c !important; }
Let me know if it works 🙂
You also better use .menu-item instead of .menu-item-object-custom in the css
Thank you very much, it works ! (much better with some css 😉 )
Your help is invaluable. Rarely have I seen such efficient and generous plugin support.
It’s not a big problem but do you know if there is a way to avoid having “Accueil” and a anchor item highlighted at the same time ?
Thank you very much, it works ! (much better with some css 😉 ) Your help is invaluable. Rarely have I seen such efficient and generous plugin support.
It’s not a big problem but do you know if there is a way to avoid having “Accueil” and a anchor item highlighted at the same time ?
You’re welcome 🙂
You need to overwrite your theme’s css for the Accueil highlighting. Add this to your css:
#top-menu li.current-menu-item.menu-item-4260 > a{ color: #66768c !important; }
Ah! I just checked your page again, change the CSS to:
#top-menu li.current-menu-item.menu-item-4260 > a, .et-fixed-header #top-menu li.current-menu-item.menu-item-4260 > a { color: #66768c !important; }
Perfect, thank you so much !
Now, i’m gonna play with the offset setting …. 😉
Have a good day !
Hi,
Is it possible to put an opacity layer on the preloader ? I would like to change that opacity to be a full color, so the prealoader hides my content while the page gets loaded and dissappear once the page it’s fully loaded.
Hi,
This page is for “page scroll to id” plugin, so I’m not sure how your request is related to the plugin(?)
Hi Malihu, I’m doing this site and like you can see it’s already scrolling horizontally but I tried 12012 different ways to link header menu to sections but it’s not working at all… Since I use your plugin on another site I installed and selected the Horizontal option but nothing happens at all… can you please advise?
Settings: https://i.ibb.co/CP3mtZg/download.jpg
Site: shorturl.at/bjwyH
Thank you!
Hi, why are these info boxes not displaying equally spaced?
even the duplicated row below that i then tweaked the copy is wonky?
thanks
ben
Hi,
Not sure I understand but this question seems out of plugin’s scope(?) This page is about “Page scroll to id” WordPress plugin.
Hi,
I cannot understand why, but everytime I click on one of the two link in the menu that are supposed to scroll (the first two), it re-loads the page before scrolling.
Also I cannot find a way to have only one highlighted only when on the section.
The page I’m talking about is here: casalovett.com/home
Let me know if you need more info.
And, by the way, thank you so much for all the work you’ve done and you’re doing in helping people with the plugin!
Hello,
Your site uses
https
and redirects all non-SSL requests (http
) tohttps
.Your links URL are all
http
, that’s why the page “reloads”.You simply need to change your links to use
https
. For example, change your “Chi Siamo” link URL from:http://casalovett.com/home/#chisiamo
to:
https://casalovett.com/home/#chisiamo
or:
/home/#chisiamo
and it’ll work.
Also, the highlight you see comes from your theme (WordPress themes usually highlight same-page links). You can reset/change this by adding the following to your custom/additional CSS:
.ast-theme-transparent-header .ast-builder-menu .main-header-menu .current-menu-item > .menu-link._mPS2id-h:not(:hover):not(.mPS2id-highlight){ color: inherit; }
These should do the trick 😉
Let me know
Thank you so so much, it’s all solved!
Damn, I was going crazy with the page-reloading issue and it was very simple in the end.
Awesome! Glad I helped 🙂
hi with the latest version of divi scroll to id stopped working in horizontal but still work in vertical scroll.
Can you help please
Hi,
I just checked your page and both vertical and horizontal work. Did you fix the issue or?
Hi, I am using DIVI builder and it doesn’t seem to want to play nice with offset. I have tried using the shortcodes and some of the other solutions you have supplied in the past but it’s still not working and scrolling past the element.
Any assistance would be much appreciated.
Hello,
There’s another script in DIVI theme preventing “Page scroll to id” from doing its thing.
Try this:
Go to “Page scroll to id” settings and enable “Prevent other scripts from handling plugin’s links” option. You can also add the following value to “Prevent other scripts from handling plugin’s links selector(s)” option field:
a[href*='#']:not([href='#'])
Save changes, test and let me know 🙂
Hello,
Can somebody tell me how can I disable the table of contents on the top of the page I used Cool Timeline plugin please?
thank you in advance
Hi,
I’m not sure what you’re asking is within plugin’s scope(?)
This said, if you can post your page/site URL I might be able to check what happens and help.
Im am trying to make a delayed auto scroll on page load. U have provided the code before:
(function($){
$(window).on(“load”,function(){
$.mPageScroll2id(“scrollTo”,”#id”);
});
})(jQuery);
What I am trying to do is set the autoscroll to only 3 different pages. Could you provide simple steps to follow to achieve this goal and basically disable the plugin everywhere else? Also time delay code for this would be much appreciated also, since I do not have any knowledge you can say in this.
If my goal is simple, maybe its achievable without the plugin, and you can guide me that way also 🙂
Hello,
You can effectively disable the plugin just by using a value like
.nothing
in “Selector(s)” option in plugin settings.You can then add the auto-scroll script only in the templates you want using PHP WordPress conditions or by using a javascript condition that checks for specific class(es). If I could see your page I’d be able to provide some code.
To delay auto-scroll on page load, you can use a simple timeout like this:
(function($){ $(window).on("load",function(){ var $delay=1000; //set the delay in milliseconds setTimeout(function(){ $.mPageScroll2id("scrollTo","#id"); },$delay); }); })(jQuery);
Thank you for the delayed code!
Absolutely! Here’s one page, which is supposed to be done like another two, which have the same layout (the first 100% screen height slide with picture and Title and after it the respective page content which I want the page to auto scroll after a short time delay)
https://www.temporary-url.com/12E0E
I shortened the link so it would not stay in this conversation if you don’t mind.
Also, if it’s not too hard for you, could you give me short instructions, on where to inject the code that you will provide me, so that I would not break anything.
P.S. at the moment the plugin is deactivated, if that changes anything.
No problem 🙂
If your theme provides a field to add javascript code in your theme, you can place the code there. Otherwise, you can simply add the script in your theme/child-theme
footer.php
template, right before the closing body tag (</body>
).If you don’t want to deal with PHP code and search for the page id value etc., you can add a javascript condition on the script:
<script> (function($){ $(window).on("load",function(){ //assuming your target id you want to scroll to is: my-id if(!$("#my-id").length) return; var $delay=1000; //set the delay in milliseconds setTimeout(function(){ $.mPageScroll2id("scrollTo","#my-id"); },$delay); }); })(jQuery); </script>
This is awesome, everything works!!!
Thank you very much, I wish you nothing but the best!!!
You’re welcome 🙂
Hello! First: thank you for this lovely plugin!
Secondly: I want to use two anchors in a text section, which don’t have anything to do with my ps2id-links in my menu. However, they interfer with these menu-links and mess up their styling. Is there a way to “exclude” anchor-links from the ps2id-link-behaviour?
I hope this was understandable …
Thanks and regards,
Jen
You can use the selectors are excluded field to add your links selector in the list.
This said, the styling can usually be fixed with a few CSS lines. If I could see your site/page I’d be able to help with a pure CSS solution.
Thank you so much for your super quick reply! Now that you have explained, I am a littel ashamed to have overlooked the exclude-option …
Don’t be 🙂 Glad I helped.
Is it possible to scroll a page down without user interaction, to activate a scroll on page load or shortly after?
Sure but you’ll need to add an extra js script in your page/theme template.
For example, you can add the following script in your theme/child-theme footer.php right before the closing body tag (
</body>
):<script> (function($){ $(window).on("load",function(){ $.mPageScroll2id("scrollTo","#id"); }); })(jQuery); </script>
and change the
#id
to the id you want to scroll to on page load.The code above is the basis and you can expand it with a delay, run on specific page(s) etc.
I found your plugin to do just what I need—highlight menu items as I scroll through a long, one-page website. So thank you! I have a question about styling, though.
My website is http://www.midtowncaboose.com/staging (Please disregard all content and colors. They are just placeholders as I figure out this styling issue.)
I am able to change the text and/or background color of the links when I scroll by targeting .mPS2id-highlight.
My nav is a ul, with each link as a li, which I think is pretty common. I would like to be able to style the li that contains each link when I scroll, rather than just the link itself.
I have figured that if I give the li no padding and hidden overflow, and I display the a as block, the a fills the li container. That works great for changing the background color of that menu section.
Is there a way to give that section a box shadow? I would love any insight you can offer. Thanks!
Hi,
You don’t really need the li element to be
overflow: hidden
. You can remove it and give the link the box-shadow you want and it’ll work. Is there a reason for having the hidden overflow on the list item?Nope! I was experimenting and came across the advice to do that. I’ll take it off and see if I can make it do what I want. Thanks so much for your reply!
No problem 🙂
<script> (function($){ $(window).on("load",function(){ $(document).on("click",".mega-menu-link .mega-menu-item .mega-menu-item-type-custom #.mega-menu-item-1501 .mega-menu-item-object-custom ._mPS2id-h",function(){ $(".mega-menu-toggle.mega-menu-active").trigger("click"); }); }); })(jQuery); </script>
I cannot get the mobile menu to hide when I click on contact.
Kind regards,
Gavin
Hi, Malihu. I’m using your wonderful PS2ID plugin on an Elementor site but I’m having the issue that others have mentioned: the mobile menu won’t close on click. I’ve tried some of the scripts you’ve posted and they don’t seem to work. Can you help me with this? The link above is a prototype page for my one-page site, and I’ll be using the same mobile menu on additional portfolio pages.
I appreciate any help you can offer. Let me know if you need more info.
Yes, of course I can help 🙂
Try the following script and let me know if it works:
<script> (function($){ $(window).on("load",function(){ $(document).on("click",".elementor-nav-menu .menu-item ._mPS2id-h",function(){ $(".elementor-menu-toggle.elementor-active").trigger("click"); }); }); })(jQuery); </script>
The script worked great. Thank you, Malihu!
You’re welcome 🙂