Menu not closing when clicking on named anchor link

[KapsLock76]

Hi there,

The slicknav menu has been incorporated in a html theme I use. I had no problems with it until I tried to make named anchor links. So I have an about page called about-us.php. In this page are multiple sections. Under the parent menu about us I have for instance Vision. The link is about-us.php#vision. But every time I click on this link when Im already on the about us page the menu doesnt close. I've tried closing it with my own jQuery, but it seems that the menu items from slicknav dont react to this code at all(jQuery click methods). The main menu does listen to this code, but as soon as slicknav is activated it stops listening to my custom js. Its a small detail of this project but Im pulling my hairs to understand whats going on here. Any tips would be greatly appreciated.

For the live version: https://kvanling.nl/schouwspel/

I have disabled removing ID's because thats the selectors I use for jQuery. I have to removeClasses otherwise the main-menu classes will be active.

Heres the setup of the code:

$('.main-menu').slicknav({
            appendTo: '.res-mobile-menu',
            label: 'MENU',
            duplicate: true,
            duration: 200,
            easingOpen: 'swing',
            easingClose: 'swing',
            closedSymbol: '►',
            openedSymbol: '▼',
            parentTag: 'a',
            closeOnClick: true,
            allowParentLinks: false,
            nestedParentLinks: true,
            showChildren: false,
            removeIds: false,
            removeClasses: true,
            removeStyles: false,
            brand: '',
            animations: 'jquery',
            init: function () {},
            beforeOpen: function () {},
            beforeClose: function () {},
            afterOpen: function () {},
            afterClose: function () {}

        });

//This is the jQuery custom code for the menu items. I dont see the console.log message when I click slicknav, but I do see it when I click the main menu. Seems like slicknav is not recognising any clicks.

$('#intlink').click(function(){
            console.log('click');
            $('#werkwijze').css('paddingTop','0px');
           

        });// end click
        $('#intlink1').click(function(){
            console.log('click');
            $('#visie').css('paddingTop','0px');
           

        });// end click
        $('#intlink3').click(function(){
            console.log('click');
            $('#team').css('paddingTop','0px');
           

        });// end click

In the codepen from slicknav when I click a hash link the menu closes. What am I doing wrong here??
Let me know if you need anything else.

Grtzz, Kasper

[gregston]

Hi, Did you ever work this out? I'm having the same problem. Also it would be nice if the menu closed after a click outside it.

[KapsLock76]

No, no soultion. I decided to live with it for now. Maybe during further development I will find a soultion. Keep you posted.

[gregston]

Thanks for that. I’ll do the same! Greg From: KapsLock76 <[email protected]> Sent: 02 June 2020 11:28 To: ComputerWolf/SlickNav <[email protected]> Cc: gregston <[email protected]>; Comment <[email protected]> Subject: Re: [ComputerWolf/SlickNav] Menu not closing when clicking on named anchor link (#189) No, no soultion. I decided to live with it for now. Maybe during further development I will find a soultion. Keep you posted. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#189 (comment)> , or unsubscribe <https://github.com/notifications/unsubscribe-auth/AGHZMPLC6KQF3DYTLBOBD3LRUTH35ANCNFSM4MVRSDYQ> .

[gregston]

I seem to have got it working by linking to the full file:

<script src="SlickNav/jquery.slicknav.js"></script>

ie not minimised version.

[ComputerWolf]

I am unable to replicate this issue even when using the minified version. Can you please create a code-pen that recreates the issue?

[sskhekhaliya]

Hi there,

The slicknav menu has been incorporated in a html theme I use. I had no problems with it until I tried to make named anchor links. So I have an about page called about-us.php. In this page are multiple sections. Under the parent menu about us I have for instance Vision. The link is about-us.php#vision. But every time I click on this link when Im already on the about us page the menu doesnt close. I've tried closing it with my own jQuery, but it seems that the menu items from slicknav dont react to this code at all(jQuery click methods). The main menu does listen to this code, but as soon as slicknav is activated it stops listening to my custom js. Its a small detail of this project but Im pulling my hairs to understand whats going on here. Any tips would be greatly appreciated.

For the live version: https://kvanling.nl/schouwspel/

I have disabled removing ID's because thats the selectors I use for jQuery. I have to removeClasses otherwise the main-menu classes will be active.

Heres the setup of the code:

$('.main-menu').slicknav({
            appendTo: '.res-mobile-menu',
            label: 'MENU',
            duplicate: true,
            duration: 200,
            easingOpen: 'swing',
            easingClose: 'swing',
            closedSymbol: '►',
            openedSymbol: '▼',
            parentTag: 'a',
            closeOnClick: true,
            allowParentLinks: false,
            nestedParentLinks: true,
            showChildren: false,
            removeIds: false,
            removeClasses: true,
            removeStyles: false,
            brand: '',
            animations: 'jquery',
            init: function () {},
            beforeOpen: function () {},
            beforeClose: function () {},
            afterOpen: function () {},
            afterClose: function () {}

        });

//This is the jQuery custom code for the menu items. I dont see the console.log message when I click slicknav, but I do see it when I click the main menu. Seems like slicknav is not recognising any clicks.

$('#intlink').click(function(){
            console.log('click');
            $('#werkwijze').css('paddingTop','0px');
           

        });// end click
        $('#intlink1').click(function(){
            console.log('click');
            $('#visie').css('paddingTop','0px');
           

        });// end click
        $('#intlink3').click(function(){
            console.log('click');
            $('#team').css('paddingTop','0px');
           

        });// end click

In the codepen from slicknav when I click a hash link the menu closes. What am I doing wrong here??
Let me know if you need anything else.

Grtzz, Kasper

This is very easy just watch on top in 'default settings object' "closeOnClick: false," and change it to "true"

[rajesh-kanna]

Try this solution and it's working fine: https://stackoverflow.com/questions/54862267/how-to-close-mobile-menu-on-click-for-anchor-links

[jonahcoyote]

I solved this for myself by calling the close method on menu item click:

jQuery(document).on("click", ".slicknav_nav a", function() { $('#mobile_nav').slicknav('close'); });

Hope that helps!