Highlight issue: Two menu items highlighted at the same time

Hello,

The highlight you see (red color on links) comes from your theme (not the plugin) and indicates the current page.

If you want to remove it for all links, you can do:

.main-navigation .main-nav ul li[class*=current-menu-]>a {
    color: #242424;
}

You should also disable “Allow only one highlighted element at a time” option in plugin settings, so you can highlight the links while scrolling (via CSS).

Let me know how you want highlight to work

Hello Malihu,

fantastic! – I did as you described.

The highlighting should work normally. So if you click on one of the menu items, only that one you click on should be highlighted.

The actual issue for me is to get this work on ‘Services’ as it is a section within the ‘Home’ page. When you are on ‘Home’ only that should be highlighted, except if you scroll to the Service-section or click on the ‘Service’-navigation-button: then ‘Services’ should be highlighted.

Go to “Page scroll to id” settings and disable/uncheck “Allow only one highlighted element at a time” option.

Set the “Highlight selector(s)” option value to:

#primary-menu .menu-item a

Save changes.

Add the following to your CSS:

.main-navigation .main-nav ul li[class*=current-menu-]>a._mPS2id-h:not(.mPS2id-highlight) {
    color: #242424;
}

.main-navigation .main-nav ul li.menu-item>a._mPS2id-h.mPS2id-highlight {
    color: #8b1201;
}

Let me know

So good, I see it evolving. Is there anything I can support you by donating for a coffee?

Still it does not behave properly: When you scroll to Services, or click on Services it does not get highlighted and Home gets de-highlighted. Further, if you scroll down to Contact, again two menu items get highlighted at the same time. When you scroll down or click to/on Contact, only Contact should get highlighted.

Change your “Services” link URL from:

https://janheymel.com#services

to:

https://janheymel.com/#services

or simply:

/#services

i.e. remember to add your domain’s trailing slash when you use the full or root-relative URL in your links.

When you say two menu items get highlighted at the same time, you mean “Contact” and “Home”? If yes, you’ll need to make the “Home” link point to the top of the homepage (e.g. with a URL like /#masthead). Otherwise, it gets highlighted by your theme as the current page.

You can donate using the link in plugin settings or this one here:

https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=UYJ5G65M6ZA28

• This reply was modified 4 years, 1 month ago by malihu.

This works just amazing. Just a last, little detail:

I pointed to “Home” and “About” via the ‘page scroll to id target plugin’. But in the Gutenberg Editor I wasn’t able to put that in the respective header. So every time I now click on the menu anchor links, it scrolls just a little down.

It would be perfect if the anchor target would be right in the top header both at ‘Home’ and in ‘About’. Is this possible to solve?

Instead of using the “Page scroll to id target” block, try creating the id targets using Gutenberg’s “HTML Anchor” field, as described here:

https://manos.malihu.gr/page-scroll-to-id-for-wordpress-tutorial/#targets-section-gutenberg-htmlanchor

You have more control this way.

The tutorial above provides many ways of adding id targets (HTML anchor field, additional CSS classes, shortcodes etc.), so choose the one that works best for you ??

If you use the “HTML anchor” field (or the CSS classes), remember to delete the “Page scroll to id target” blocks you’ve added previously.

Thank you, unfortunately the first time I am able to use the Gutenberg HTML Anchor field is too far down. The target widget should be placed on the header or site title, but there’s not HTML anchor field.

I wrote to my theme support and they suggested to use #main. But I think they didn’t understand your plugin (which they suggested) with the targeting. Or is there any option to use #main as a target on a specific site?

The goal is, that the respective anchor link always goes to the top of the respective page. Is that solvable?

I read the article you attached, I don’t find additional css class fields, the anchor field etc. on the top. However, I was just able to place it near to the top. It’s not optimal, but a okay-compromise. Still when clicking on either about or home page, it scrolls down a little. Would be optimal if it wouldn’t be scrolling and just scroll/stay at top, so if you have any idea, let me know ??

I think you need to use the offset for the sticky header you have.

Go to plugin settings and set the “Offset” option value to:

70

70 being the height of your top sticky header.

Save changes and test.

I set the “Offset” option value in your plugin settings to 70, but nothing changed for me (Did some browser caching too). Still scrolling down..

If that helps:
“Auto-generate #ps2id-dummy-offset element” is ticked off. (Turning it on didn’t change anything)

“Use element’s custom offset (if it exists) when scrolling from/to different pages.” also ticked off. (Turning it on didn’t change anything either)

It has changed for me (I just tested it). Now, when I click “SERVICES” the page scrolls exactly above the “SERVICES” title.

So, for the other links:

To make the “HOME” and “ABOUT” scroll a bit further down (e.g. at the image), add the following to your CSS:

#home, 
#jan{
    transform: translateY(1.25em);
}

You also need to add the following CSS in order to fix your theme’s issue with the sticky header changing the page height and thus messing with the targets position:

#sticky-navigation ~ #page {
    margin-top: -30px;
}

Add both the above CSS and let me know

Amazing! – To clarify: For ‘SERVICES’ its behaviour is absolutely fine.

Just for ‘HOME’ and ‘ABOUT’ I don’t want any scrolling to happen. I just want the page to appear, without scrolling. Sorry, if I explained that wrong.

As you mentioned earlier I needed to add the “Page scroll to id target” block on ‘HOME’ and ‘ABOUT’ in order for the menu colouring behave properly. That worked, but I don’t want any scrolling to happen, the site should just appear (stay scrolled on the top).

If you want the “ABOUT” to not scroll the page at all, you can simply remove the hash and use it as a standard link, i.e. change its link URL from:

/about/#jan

to:

/about/

This is because if the “ABOUT” doesn’t scroll the page, there’s no reason to have a hash like #jan (and you already have a back-to-top arrow link).

For “HOME” you could do the same or change the first CSS to something like:

#home{
    position: absolute;
    top: 0;
}

In addition, to compensate for highlight (i.e. keep the link highlighted as you scroll sown), you could give the target element some height like this:

#home{
    position: absolute;
    top: 0;
    height: 100vh;
}

Exactly, but the issue was, that when I change the link URL from /about/#jan to /about/, when you scroll down to contact, both elements get highlighted which I actually wanted to avoid. But with the other method you mentioned I’d need to add an anchor link to all of my pages, meaning the URL would be expanded by an #anchorlinktext which does not look good and I don’t think it’s so good for SEO.

I’d need to do this on all of my sub-pages (in the ‘SERVICE’-section) too. I think I swallow the pitter pill and leave two items highlighted at the same time (when the user has scrolled down till ‘CONTACT’).

But this support was an immense help. Thank you very much.