Scroll to anchor and highlight menu item not working in Firefox

My home page has 7 anchor points which are the first 7 items on my menu. The last menu item “Reservations is a separate page.

After a lot of blundering work with minimal knowledge I have javascript that highlights the correct menu item when the home page scrolls to the relevant anchor point. Everything seems to work fine in Chrome and Safari. Works fine for the mobile menu too, at least on iPhone in Safari. (white inactive, red active)

In Firefox it does not work. Scrolling works fine. Anchors all show active (red) when on the homepage. Any thoughts on what would make Firefox unique?
Test website is here
My code is here
Video of the problem using 3 browsers is here

It seems to be working in my Firefox (albeit a little slow). Have you cleared the cache and tried again?

Interesting, I have cleared cache many times, both locally and at my host. Not just page cache but all cache at WPEngine. I have also shut my computer down and restarted. I am also testing in a new private window in each browser each time.
Speed wise I suspect my hacked together from snippets code is not very good. Any tips on that appreciated.

The menu items are all in red now in Chrome (except for accommodation) now so I guess you are working on the site at the moment.

When you check things like the scroll event and resize event then that causes a delay as they are checked continuously. You should debounce the routines so that they only do their checks less often.

I’m not quite sure whether you were supposed to be changing the menu color when someone has scrolled down the page manually or whether you were just changing the menu color when clicked. It would be easy to change the menu color when clicked as you could just add a class with js and use that to highlight the menu item.

Detecting the position on manual scroll is a little more complex though.

You don’t need js to scroll to an element these days as CSS can do that with scroll-behavior…

1 Like

Sorry about that. I was trying something. Removing the unnecessary (document).ready seemed to make it work in Firefox for me. It also seems a bit faster.
I do change the menu item color when the user scrolls as well as when they click a menu item. Any suggestions for improving this code appreciated. What do you mean by debounce the routines?
Another small bug I have noticed. All anchor menu items scroll to the right spot, but if I go to the Reservations page and then back to a anchor menu item on the home page, for example About Us it goes to the right section but it is aligned with the top off screen. Click another link and it will be fine. It is just that initial Anchor after another page.

You might find this helpful.

Instead of using scroll, you could consider using intersection observer instead.

1 Like

I think that’s the same issue as if you go directly to this page.

The js doesn’t detect the scroll position as you haven’t navigated from the menu.

You probably need some js to query the url string on page load and detect if there is a fragment identifier in the url and then navigate to the correct section as before. @rpg_digital would probably have better advice :slight_smile:

Note that you don’t get that issue in my demo above (use debug mode to test) and you can link correctly to the element as the offset is handled in css alone. (Of course you would still need js to highlight the nav item.)

Thanks for this information. A lot for a novice to absorb but I am digging into it. I will probably be back with more questions. Thanks again


I will start playing around with this. Thanks heaps :slight_smile:
I don’t ask questions often, but I remember you answering a question that everyone else said was not possible 12 years ago. How to have a single image span across the background of multiple pull down menus.

1 Like

This was a bit of experimentation I did some time ago. Not sure if it is helpful.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.