Anchor error

Hello, I have an anchor error.

I have the menu which calls some inside anchors at the homepage and 2 outside links to another pages.

My logic tells me that I have to put all the URL in the link so when I´m in the outside pages and I want to return to the home anchored sections I get directly to there. This works fine, but if I am at the homepage it doesn´t work fine. In Chrome and Vivaldi works partially, in Firefox and Safari doesn´t work,

The console of Vivaldi gives me this error when I press the button:

x-site.min.js?ver=7.1.0:1 Uncaught TypeError: Cannot read property 'closest' of undefined at Object.<anonymous> (x-site.min.js?ver=7.1.0:1) at cornerstone-site-body.min.js:1 at Array.forEach (<anonymous>) at Object.apply (cornerstone-site-body.min.js:1) at before (cornerstone-site-body.min.js:117) at HTMLBodyElement.<anonymous> (cornerstone-site-body.min.js:117)

The Firefox console gives me this error:

   TypeError: t.$anchor is undefinedx-site.min.js:1:55393
    85 https://buciocarrilloypoo.com/wp-content/uploads/siteground-optimizer-assets/x-site.min.js?ver=7.1.0:1
    apply https://buciocarrilloypoo.com/wp-content/uploads/siteground-optimizer-assets/cornerstone-site-body.min.js:1
    forEach self-hosted:227
    apply https://buciocarrilloypoo.com/wp-content/uploads/siteground-optimizer-assets/cornerstone-site-body.min.js:1
    before https://buciocarrilloypoo.com/wp-content/uploads/siteground-optimizer-assets/cornerstone-site-body.min.js:115
    wt https://buciocarrilloypoo.com/wp-content/uploads/siteground-optimizer-assets/cornerstone-site-body.min.js:115

What is going on?
The url is:

Thanks for any guide to solve this.

Also it doesn’t work on mobile.

Hi @Creativecure,

Thank you for writing in, your idea is correct but you need to have a separate menu for homepage, one page navigation is only for one page, you can not make that menu as your primary menu, so you need to have 2 menus, one for the homepage and one as the primary menu for other pages.

Set up One Page Navigation

Also, please apply the ID on the Section, not on the column.

Hope it helps,
Cheers!

Thanks, again. Never cross my mind that yhis was the correct way to work with anchors.

Have a good weekand.

Cheers!

You’re welcome, have a nice weekend too,

Cheers!

Hello again.

This worked fine in desktop, but in mobile the menú link doesn´t jump to the anchor and it doesn´t even close.

Hi @Creativecure,

Your version of X and Cornerstone is not compatible, you updated Cornerstone to the latest version but you leave the X behind.

  • image

Please update X to the latest version (7.2.3).

Updating Your Themes and Plugins

Remember to clear all your caching features (plugin, server-side, CDN, and browser’s cache) after updating so that the code from the latest release is always in use. This will help you to avoid any potential errors.

Cheers!

We have to do the FTP update, cause the multisite never let me update the theme. The update worked partially. It solved the problem with the anchor links, but it didn´t closes the menu on mobile, What is missing?

Hello @Creativecure,

It could just be a caching issue on your device because when I checked it, the mobile menu is now working:

Kindly make sure to clear your site and browser cache then check again.

Hope this helps.

I see… but still doesn´t work.
I am using chrome and brave in Android 8, in both I closed the tab, clear all cache, history since the begining of the time, then type the address and the menu remains open.

Also I’ve tried in 2 old Android phones and it doesn´t worked. And I ask a few people to try it (they have never get in) and the problem is the same, Most of Android phones, but also a couple of iPhones.

Hi @Creativecure,

I check your site with Android and the mobile menu works fine.





I notice that your site is heavily minified, would you mind clearing and deactivating all your caching and optimizer features for a while, not just plugins but also on server-side? and see if that resolves the issue.

Thanks,

I disabled SG optimizer and purge files. I´ll wait a couple of hours because know is the same.
Thanks

If you come around with any other advice I´ll be very thankful.

Hi @Creativecure,

Another support here and in my device Samsung note I can confirm mobile menu is working fine too:


Thanks @lely, does the menú closes when you select “About us”, “Practice areas” or “Contact” at homepage? If it is correct then there is something weird in Mexico, 'cause no one who has tested the page, get the menu closed.

Hi @Creativecure,

Thank you for the clarification, No it’s not closing when we click “About us” or “Practice areas”, but that has been the normal behavior of the mobile menu. Would you mind clarifying what is the issue with that? I can only see that being an issue if you make your mobile header a fixed header that will cover your content, but in this case, it’s not.

Cheers!

Ok, I see… Finally we understand each other, for my client that is an issue, he wants the menu to get closed after pressing an anchored link. Is there any way to do it? With some JS code? thank for clarifing this.

Hi @Creativecure,

It is possible with custom JS code but that would be outside the scope of our support.
See the following guide on how to get the correct selector:

Then here’s the jquery function you need:

When the menu is close/collapse, this class was added .x-collapsed on mobile navigation container. Then the following CSS will work after that certain class is added.

.x-nav-wrap.mobile.x-collapsed {
    display: none;
}

In jquery inside the click function, please manipulate how you can add those class to close navigation.

Hope this helps.

Thanks for the tip.

I found a solution that works in a 99%.

jQuery(function($) {
$(’.x-navbar .x-nav-wrap.mobile a’).click(function(){
$(’.x-nav-wrap.mobile’).toggleClass(‘in’).css(‘height’, 0);
$(’.x-btn-navbar’).toggleClass(‘collapsed’);
});
});

The only thing is that you have to doble clic the hamburger after you have selected an anchored link.

I changed the “a” tag for “li”, for trying to avoid the hamburger but still remains the same.

Any last advice on this?

Thanks

Hello @Creativecure,

Please remove the code and try this instead:

(function($){

    $( ".x-navbar .x-nav-wrap .x-nav > li > a" ).on( "click", function() {
        $('#x-btn-navbar').trigger( "click" );
    });

})(jQuery);

Kindly note that since this is a custom code that changes the default behavior/display of the theme, you will be responsible to maintain or update the code in case you require further changes or if the code stops working in future updates. If you are uncertain how to proceed, it would be best to get in touch with a developer.

Hope this helps.

Thanks but it didn´t, the menu remains open with your code.