offset and highlighting not working

Hi,

Offset seems to work as expected for me (you correctly enabled “Verify target position…” option for your case). Is there a specific case where offset doesn’t work properly? Can you post an example on how to replicate the issue?

The sub-menu items you see in blue background color are highlighted by your theme (not the plugin). Are these the links you’re talking about? Do you need to reset theme’s CSS for those links?

Also, you don’t really need “Allow only one highlighted element at a time” option enabled.

Thanks for getting back to me! The offset seems to not line up properly the first time I click on each link, but will after an additional click. It will also stop just before where I have it offset to before adjusting to correct location on that second click. I am reloading my website in incognito each time.

And yes those are the links I was referring to. How would I reset the theme’s CSS to get those links to highlight correctly.

I’ve unchecked “allow only one highlighted element at a time”

No problem ??

The double click issue you see when coming from a different page (it doesn’t happen on the same page because you enabled “Verify target position…” option), happens because your offset selector #mysticky-nav has a height of 120 pixels when the page is a the top (i.e. when top menu is not sticky) and a height of 84 pixels when the page has scrolled down a bit (i.e. when top menu has become sticky).

So, because the #mysticky-nav has different height according to page scrolling position, a different offset is applied accordingly! So when the page is loaded, an offset of 120 px is applied but when you click the link a second time, a 84 px offset is applied (since the page is already scrolled down and the top menu is already sticky).

Hope all these make sense ??

You should either set another element as the offset (one that does not change its height while the page is scrolling) or use plugin’s “Auto-generate #ps2id-dummy-offset element option” and use it instead (see info here).

Also (not sure when you enabled this) you don’t need “Keep the current element highlighted until the next one comes into view” option.

To reset your theme’s current-page sub-menu items highlighting, add this to your custom/additional CSS:

.menu-items .sub-menu li.current-menu-item:not(:hover) {
    background: rgba(0,0,0,.04);
}

.menu-items .sub-menu li.current-menu-item:not(:hover) > a {
    color: #000;
}

Let me know

Hey Malihu, yes that makes a lot of sense, thank you for that explanation! I was able to use the dummy-offset to get the scrolling feature working. Very helpful resource!

And that code worked perfectly to reset my theme highlighting, thank you for the CSS. Last questions, would there be a way to make whichever submenu I last clicked to remain highlighted?

Thanks again,
Jon

Sure. Change the CSS you added to something like this:

.menu-items .sub-menu li.current-menu-item:not(:hover) {
    background: rgba(0,0,0,.04);
}

.menu-items .sub-menu li.current-menu-item:not(:hover) > a:not(.mPS2id-clicked) {
    color: #000;
}

.menu-items .sub-menu li.current-menu-item > a.mPS2id-clicked {
    background: #2e3192;
}

Let me know if this is what you want

That is exactly what I was looking for, thanks! Testing the page a bit, the submenu will not be highlighted on first click to the new page, but then will look exactly how I want after subsequent clicks.

Also circling back on the dummy-offset, I wrote some CSS, but because I used actual values, depending on the screen resolution, sometimes the offset isn’t aligned correctly. I thought about replacing the XXpx with ‘#mysticky-nav’px, but then I might run into the same problem as before. Also not sure if that would even be valid CSS because it doesn’t seem to work

#ps2id-dummy-offset{
  height: 75px;
}

@media only screen and (min-width: 1100px){
  #ps2id-dummy-offset{
    height: 95px;
  }
}

Which times does the offset not align correctly?

For the highlight issue:

It might be better to use plugin’s highlight class (instead of clicked class). Go to plugin settings and add the following value in “Highlight selector” option:

.menu-item a

and click save changes.

Then change your CSS to:

.menu-items .sub-menu li.current-menu-item:not(:hover) {
    background: rgba(0,0,0,.04);
}

.menu-items .sub-menu li.current-menu-item:not(:hover) > a:not(.mPS2id-highlight) {
    color: #000;
}

.menu-items .sub-menu li.current-menu-item > a.mPS2id-highlight {
    background: #2e3192;
}

That worked perfectly, thank you! And trying to replicate my offset issue it appears to have been a cache problem. Everything is working correctly! Thank you for all your help and for working with me!

You’re welcome ??