[Resolved] Page Anchor issue

[Craig]

Hi Everyone,

I am having an issue with sections loading using Div Anchors ie …/#section1:
https://fitnina.wpengine.com/work-with-me/

Within the menu items I have some sub-menu item dropdowns for /work-with-me, I was hoping that when click would click on the sub menu item, like “Group Coaching” it would take you to a different section of the work-with-me page for that pertains to “Group Coaching”. However, it seems like those div anchors only work when I am actually on the page Work-with-me page. If I am on another page of the site, and I click a submenu item for work-with-me. It just loads the page, doesn’t take you to that section on the page. Hoping you can help me out.

[Craig]

I think I might have figured it out here: https://community.wpbeaverbuilder.com/t/anchor-links-to-another-page-not-working-in-chrome/10557/7

Then I just created a header hook:
<script>
jQuery(document).ready(function () {
setTimeout(function () {
var hash = window.location.hash;
window.location.hash = “”;
window.location.hash = hash;
}, 300);
});
</script>

Not sure if that is the best way to go about fixing this.

[David]

Hi there,

yes that is a good solution for the issue, theres no other way of doing it without adding some Javascript.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Craig]

Ok great, I have the hook in the header. Should I have that in the wp footer instead? Or does it not really matter?

[Craig]

I am noticing that it works on desktop but not working with my off-canvas on mobile. Any possible solution?

[Tom]

Strange, does it work again if you remove the above code?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Craig]

Hey Tom and David

It doesn’t work even when I remove the above code. I tried making a hook with the same code, only targeting the slideout menu and not wp head. (This was just a shot in the dark).

[Craig]

I did figure out something that seemed to work. Within the Off-Canvas widget if I use custom HTML and just manually create the aref tag. The link seems to work, but not with menu items. Not sure if that helps with recreating a solution to still use the menu items instead of custom html.

[Tom]

Strange – it’s not allowing the link to even navigate to the page.

I just tested this locally and couldn’t reproduce. Is there any other custom code related to this functionality on your site that we can disable temporarily?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Craig]

Hey Tom

I was using the code from this: https://docs.generatepress.com/article/animated-hamburgers/

I had gotten the hamburger menu to animate, but seems like that was what was causing the issue. Once I removed it from function and removed the css it works now. I did notice when I would select the menu item from off canvas the hamburger toggle would close.

[Tom]

Ahh, interesting.

Can you try the updated javascript on that page?: https://docs.generatepress.com/article/animated-hamburgers/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Craig]

Awesome! that did it. Thanks so much, what was it? Was it in the php? Just curious trying to learn more about coding. Thanks again though.

[Tom]

Just a small bug in the JS for the animated burgers. Glad it worked! 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts