• Resolved edinmaloku

    (@edinmaloku)


    Hello, I can’t get highlight to work. Been trying it for days so I’m kinda tilted, most likely not seeing what’s in front of me. I am using Elementor.

    What I am doing: I have a Custom URL on my navigation bar for #whoweare, and I have a “Page scroll to id target” widget on Elementor with #whoweare ID so when I press that custom URL it scrolls down there and all is fine. Only problem is I can’t get it to highlight the certain Custom URL when it scrolls down there, I have a sticky header. The site isn’t published yet by the way.

Viewing 15 replies - 1 through 15 (of 32 total)
  • Thread Starter edinmaloku

    (@edinmaloku)

    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 3 years, 8 months ago by edinmaloku.
    Plugin Author malihu

    (@malihu)

    Hello,

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

    Thread Starter edinmaloku

    (@edinmaloku)

    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 3 years, 8 months ago by edinmaloku.
    Plugin Author malihu

    (@malihu)

    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:

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

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

    Thread Starter edinmaloku

    (@edinmaloku)

    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.

    Plugin Author malihu

    (@malihu)

    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 😉

    Thread Starter edinmaloku

    (@edinmaloku)

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

    Plugin Author malihu

    (@malihu)

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

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

    Thread Starter edinmaloku

    (@edinmaloku)

    https://prnt.sc/v44t8y

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

    Plugin Author malihu

    (@malihu)

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

    Thread Starter edinmaloku

    (@edinmaloku)

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

    Thread Starter edinmaloku

    (@edinmaloku)

    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.

    Plugin Author malihu

    (@malihu)

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

    Thread Starter edinmaloku

    (@edinmaloku)

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

    Plugin Author malihu

    (@malihu)

    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

Viewing 15 replies - 1 through 15 (of 32 total)
  • The topic ‘Can’t get highlight to work’ is closed to new replies.