Menu not closing when clicking on named anchor link #189
Description
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