Can’t get highlight to work

Okay, got the clicked to work and it works perfectly. Got the highlight to work aswell but it highlights 2 at the same time despite me ticking the option for one only, and it highlights the custom URLs before even reaching the set ID anchor during scrolls and keeps 2 highlights at the same time. The problem is, the highlight property comes on the moment the screen sees the said anchor, not when it reaches the anchor. Any fix?

• This reply was modified 4 years, 5 months ago by edinmaloku.

Hello,

Can you post your site URL so I can check what happens and help?

Published the site for a bit just till you can check. Only WHO WE ARE and WHAT WE DO is usable.

One way to see the problem is: Press WHAT WE DO and see where it takes you, then scroll up and see that the redline highlight appears much before it should.

<style>
a.hfe-menu-item.mPS2id-highlight {
text-decoration: underline;
text-decoration-color: red;
text-underline-position: under;
}
</style>

This is the code I use for it.

https://zerringroup.com/ is the site.

• This reply was modified 4 years, 5 months ago by edinmaloku.

In plugin settings disable “Keep the current element highlighted until the next one comes into view” option. Save changes, test and let me know.

Also, since you use the Elementor page builder, it’s better to set the targets like the way it’s described here:

https://manos.malihu.gr/page-scroll-to-id-elementor-guide/

i.e. using the CSS ID field of Elementor element.

I’ve reset all the settings to default which has both one element on highlight and the setting you mentioned disabled, hasn’t changed anything – feel free to check. I also use anchor margins so my sticky header doesn’t cover parts of the sections anchor scrolls down to. I use this css to configure it:

<style>
.anchorfix {
display: block;
position: relative;
top: -130px;
visibility: hidden;
}
</style>

Tried removing it and it hasn’t changed anything with the plugin, waiting for your confirmation though.

OK. First, you need to remove the .anchorfix CSS because it makes #whatwedo target come 130px before the actual section.

You also need to remove the a.hfe-menu-item.mPS2id-clicked CSS you added because it keeps the clicked element highlighted until some other menu link is clicked.

Try doing both of the above and test ??

Did both, still no success ?? Sorry to keep you trying aswell, not sure what’s wrong at this point.

Also, since your top header is sticky, you should set the “Offset” option value (in plugin settings) to:

.elementor-top-section.she-header-yes

https://prnt.sc/v44t8y

Done with that aswell, no success. No changes at all and still the exact same problem fml.

OK now enable “Allow only one highlighted element at a time” option.

Still no success, seems like it disabled it all fully, no highlights appear now.

Edit, it has actually changed some stuff for the better but it’s still not quite right. Both appear at the same time and not at the right time.

Did you clicked “Save changes” after changing the “Offset” option?

Yep, just re-checked. It’s saved.

No problem. We can solve this.

Try this:

In plugin settings disable again “Allow only one highlighted element at a time” option and click Save changes.

In your CSS, change:

a.hfe-menu-item.mPS2id-highlight {
    text-decoration: underline;
    text-decoration-color: red;
    text-underline-position: under;
}

to:

a.hfe-menu-item.mPS2id-highlight-first {
    text-decoration: underline;
    text-decoration-color: red;
    text-underline-position: under;
}

Save and let me know