Anchor links on mobile menu not working

[nextmarketingAU]

Hi,

I’m having some problems with the anchor links on the mobile menu of my site.

The links look like this about/?type=clients#client

the type=client is there to activate some javascript to change the content of the page.

Clicking on these links while on any page other than the about/ page works.
If you are on the about page or about/?type=partner#partner about/?type=team#team
then nothing happens.

Any help of pointers would be appreciated.

Thanks

[nextmarketingAU]

This reply has been marked as private.

[Veena]

Can you pls disable all plugins once and see if that error goes away or not?
If the problem persists pls share temporary login details to your site as a private reply here.

[nextmarketingAU]

Hi phoenix,

I’ve tried disabling all plugins and testing the mobile menu but the problem does persist.

Unfortunately I can’t give out any login details. Are there any steps that you would recommend to fixing this problem. Are you able to replicate it using another install? I’ve tried the menu without the ‘type=partners’ but the problem remains so I assume it’s the anchor.

Any help would be appreciated

Thanks

[Raghavendra]

If I am getting this right, the problem happens only if there is an internal link in the menu item. Is that right?

[nextmarketingAU]

Thats right. When clicking on a about/#anchor link from any other place on the site the anchor link functions perfectly. But when you’re on the about page none of the anchor links work in the mobile menu. The page doesn’t even reload, nothing happens.

[Raghavendra]

The problem is due to the smoothscroll plugin trying to take over the internal URLs as smooth scroll links in a page. And it fails to work right when you have urls with GET params or with URL which have special characters like ? in them. Is there a way you can avoid the internal links for pages with URLs involving GET params. I can ask the plugin author to take a look at the issue but just wondering if you can eliminate the internal links or the URLs with GET params. It is quite rare to have this type of link and hence asking.

[nextmarketingAU]

Can’t get rid of the GET params on this page. But would very much like to hear any advice on how to fix this issue.

Thanks

[Raghavendra]

I understand the problem a little better now. Looks like you have a script of some kind which changes based on the button clicked (sort of like a tab). Can you pls approach the author of the plugin

https://github.com/kswedberg/jquery-smooth-scroll/issues

and open a ticket? He has been very helpful in the past and will be glad to help. Pls provide the link to the page where you are seeing this issue of link just not going through.

If you are not comfortable, pls let me know and I can get in touch with him. Thanks.

[nextmarketingAU]

I’ve rewritten the code so I don’t rely on the GET params to trigger jquery to show or hide content. Now it works when the url is changed. That hasn’t helped, clicking on a menu link while in the mobile menu still adds no # to the url. This is even with all of the jquery smooth scroll code on the page disabled.

[Raghavendra]

Are you sure everything is working right after these changes? I am unable to navigate using the primary menu menu items(our team, our parteners etc.) on the top of About page. It is not just the mobile menu which is having this issue. Looks like now we have smooth scroll as well as tab change happening when you click on the buttons. To me, the concept sounds cool but implementation is a little confusing. It is hard to know what’s happening and certain things take time (like clients take time to show up).

Can you pls verify once and tell me if the main menu itself is fine and only the mobile menu is having this issue?

[nextmarketingAU]

Through the primary menu on the desktop view of the website i can access the our team, our partners, and clients pages which now have only the fragment after the url.

This isn’t the case with the mobile menu which allows me to visit one of the about#something pages from any other pages than the about pages. When trying to visit any of the about#something pages from either about or about#somethingelse the mobile menu doesn’t go anywhere.

I’ve disabled all of the smooth scroll jQuery and the problem still persists.

So the main menu works fine but somethings not working with the mobile menu.

[Raghavendra]

This reply has been marked as private.

[nextmarketingAU]

Disabled the smooth scroll code. The error has stopped but the mobile menu still doesn’t work.
Clicking on any of the sub menu items doesn’t navigate the page to page#anchor it stays as page#

[Raghavendra]

I checked the page again. I assume you are referring to the fact that the menu does not jump to the appropriate section when you click on the mobile menu when someone is on the about page. Basically the issue is one of internal navigation and navigating from the external pages is working fine. I hope I summarized this right.

Coming to the issue itself, the reason the mobile menu items do not work is because it can’t. The one selected item is the only being shown in the page and the rest two are hidden via display: none by the tab. The anchor cannot navigate to any section which has been hidden via display: none since it is considered as good as not part of dom tree. You have custom hooks enabled for the big buttons to change the display property of the sections on those buttons and such a click handler has not been configured for the mobile menu items and hence they won’t work except for the specific section open.

[Author]

Posts