Plugin Author
malihu
(@malihu)
Hi,
The sub-menu does not close with or without “Page scroll to id”. You can test this by deactivating “Page scroll to id” and clicking your sub-menu links. The page will “jump” and the menu will stay open.
This is not something you can solve with the plugin (or js code). The sub-menu closes only after you move the cursor out of the menu itself. This is done via your theme’s (twentyseventeen) stylesheet.
I think you thought the menu was closing without “Page scroll to id” (as in your “About Hope” menu) because you didn’t have links pointing to sections within the same page(?)
If you test your “About Hope” menu, you’ll see that its sub-menu does not close either. It’s just that its links go to another page, in which the sub-menu always starts closed.
Anyway, the sub-menus close only when the user has moved the mouse cursor out of the menu.
Hope this helps and explains what happens 🙂
Hi Malihu,
Thanks for your quick reply, much appreciated.
I have deactivated Page scroll to id and, as you say, the sub-menu does remain, however it disappears now when the cursor is moved outside the sub-menu.
When Page scroll to id is activated, the sub-menu remains even when the cursor is moved outside the sub-menu. To close the sub-menu you have to click elsewhere.
It’s a small difference I know, but frustrating. I’ll investigate the TwentySeventeen CSS…
Thanks again, Andy
Plugin Author
malihu
(@malihu)
Can you activate the plugin again?
The sub-menu was closing for me when I was moving the cursor outside of it.
Hi Malihu,
I’ve activated the Page scroll to id plugin…
Thanks, Andy
Plugin Author
malihu
(@malihu)
OK I see.
We can bypass the theme’s functionality only with javascript (I did some tests with pure CSS but it didn’t work as the theme applies few classes via js).
Can you add a custom js script in your theme?
This is what you need to do:
1.Edit your theme/child theme footer.php template.
2.Add the following script below/after wp_footer() function:
<script>
(function($){
$(function(){
$(".sub-menu .menu-item").on("click","a._mPS2id-h",function(){
$(this).blur();
});
});
})(jQuery);
</script>
3.Save it and test your page 😉
Let me know if it worked
Brilliant, thanks Malihu, that script works well – sub-menu now disappears when the cursor is moved away.
Much appreciate your help on this, Andy
Hi there:
I’m having that same testy issue with a site built in wordpress Genesis with a child theme….namely the same page jump links on the main page are remaining active after the page scrolls to the target and the dropdown sub-menus stay open…
https://directsellingedge.com/
Looks like that script would be the solution for my issue too but modified for my theme/s.
I tried changing the classes out to match my situation but did not have any luck.
I’d be super grateful for your help and then I could file this one for later use.
Thanks so much….
Dawn
Plugin Author
malihu
(@malihu)
@lunadauhnn Hello,
Can you change a selector in your theme’s CSS?
Edit the file .../themes/Beckstead/style.css and change line 903 from:
.menu .menu-item > a:focus + ul.sub-menu
to:
.menu .menu-item > a:not(.mPS2id-clicked):focus + ul.sub-menu
Save the file and test 😉
You should also enable “Prevent other scripts from handling plugin’s links” option in “Page scroll to id” settings.
Let me know
