Can’t get highlight to work

Okay, seems to have fixed the issue that has 2 highlights showing up at the same time. The problem now that the highligh isn’t appearing at the right time, it’s coming when the said anchor enters my screen instead of when I scroll down to it fully.

Ok. You can solve this in 2 ways, so choose the one you want:

1)Instead of using “Page scroll to id” target widget, set the targets like the way it’s described here (using the CSS ID field of Elementor element):

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

2)Set a CSS position and top value for your targets like this:

a#whoweare, a#whatwedo{
    position: absolute;
    top: 120px;
}

Done with the first option since the second one didn’t work, I think it’s KINDA good now. Can you check to confirm? Not sure if it’s actually supposed to be this way or is it only cause I don’t have the rest of the page set up to scroll down more. The whatwedo highlight still doesn’t appear when I’m over it fully, or is it not supposed to and is the middle how it’s supposed to be?

Duplicated the last part and set the anchor for #ourwork for better check results.

It’s supposed to work like this.

The highlight feature is user-centric, in the sense that it indicates the line of view of the user, thus indicating the section he/she is viewing (to the user).

It’s not supposed to highlight only when the section fills the screen. The user can read a section when it’s in his main line of view (i.e. approx. in the middle of the viewport), not only when it fully “fills” the screen.

Hope this makes sense.

Yep, thanks a lot man I appreciate it and I love your plugin, everything seems to be good except one last thing that I couldn’t figure out on my own hahaha.

<script>
(function($){
$(window).on(“load”,function(){
$(document).on(“click”,”.menu-primary .menu-item ._mPS2id-h”,function(){
$(“.mobile-menu-button”).trigger(“click”);
});
});
})(jQuery);
</script>

Could you help me convert this code of yours for my page, it’s to remove navbar on mobile/tablet when clicked to a section. Thanks in advance, I have left the site online incase you need to check the classes and stuff.

You’re welcome ??

Try this:

(function($){
  $(window).on("load",function(){
    $(document).on("click",".hfe-dropdown.menu-is-active .menu-item ._mPS2id-h",function(){
      $(".hfe-nav-menu__toggle").trigger("click");
    });
  });
})(jQuery);

Works like a charm, I can’t thank you enough man. I appreciate it a lot!

Glad I helped ??

There seems to be a bug now, the highlight starts glitching out whenever I increase the font size.

Update, only when the font is over 29px.

I just checked the page with the menu font-size at 29px and couldn’t see any glitch(?)

Yeah, I meant only >29, not =>29. It’s 30 now you can try it.

This bug isn’t something that has to do with the plugin, nor it can be solved by it.

It’s a CSS-browser engine combination bug that seems to be related with Chrome (it doesn’t happen on webkit or Firefox for example). It seems that it has to do with the text-underline-position: under; rule, which Chrome seems to have issue with(?)

Knew it the moment stuff were getting weird, lines appearing out of nowhere. Thanks. Any css tip you could give me for a hover red underline effect, that has some space between the underline and text?